:root { --bg:#0b0f1a; --fg:#e6edf7; --muted:#8b99b0; --card:#121a2b; --border:#1f2a40; --accent:#4f8cff; --good:#3ddc97; }
  * { box-sizing:border-box; margin:0; padding:0; }
  body {
    font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
    background:radial-gradient(1200px 600px at 70% -10%, #14213d 0%, var(--bg) 60%);
    color:var(--fg); min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px;
  }
  main { width:100%; max-width:1100px; }
  .layout { display:flex; gap:20px; align-items:flex-start; }
  .left { flex:1 1 480px; min-width:0; }
  .map-wrap {
    flex:0 0 380px; background:var(--card); border:1px solid var(--border); border-radius:16px;
    padding:14px; box-shadow:0 20px 50px rgba(0,0,0,.35);
  }
  .map-wrap .maptitle { font-size:.85rem; color:var(--muted); margin-bottom:10px; }
  .map-sub { margin-top:4px; font-size:.75rem; }
  #map { width:100%; height:340px; border:0; border-radius:10px; display:block; background:var(--bg); z-index:0; }
  .map-legend { display:flex; flex-wrap:wrap; gap:12px; margin-top:10px; font-size:.72rem; color:var(--muted); }
  .map-legend .lg { display:inline-flex; align-items:center; gap:6px; white-space:nowrap; }
  .map-legend .dot { width:10px; height:10px; border-radius:50%; display:inline-block; }
  @media (max-width:900px) {
    .layout { flex-direction:column; }
    .map-wrap { flex:1 1 auto; width:100%; }
  }
  .hero { text-align:center; margin-bottom:28px; }
  .hero .tag { display:inline-block; margin-top:16px; padding:5px 14px; border:1px solid var(--border);
    border-radius:999px; font-size:.85rem; color:var(--muted); background:var(--card); }
  .hero .ip-label { font-size:.85rem; font-weight:700; letter-spacing:.12em; text-transform:uppercase;
    color:var(--muted); margin-bottom:8px; }
  .hero .ip { font-size:clamp(2rem,6vw,3.4rem); font-weight:800; letter-spacing:-0.02em; word-break:break-all; margin:0; }
  .sr-only { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
  .hero .ip6 {
    display:block; font-size:clamp(1rem,3vw,1.35rem); font-weight:600; color:var(--good);
    margin-top:10px; word-break:break-all;
  }
  .hero .tag { display:inline-block; margin-top:16px; padding:6px 16px; border:1px solid var(--border);
    border-radius:999px; font-size:.95rem; color:var(--muted); background:var(--card); }
  .card { background:var(--card); border:1px solid var(--border); border-radius:16px; padding:20px 22px;
    box-shadow:0 20px 50px rgba(0,0,0,.35); }
  .row { display:flex; justify-content:space-between; gap:16px; padding:12px 0; border-bottom:1px solid var(--border); }
  .row:last-child { border-bottom:none; }
  .label { color:var(--muted); font-size:.85rem; white-space:nowrap; }
  .value { font-weight:600; text-align:right; word-break:break-word; }
  .value .ip { color:var(--accent); }
  .muted { color:var(--muted); font-weight:500; font-size:.85rem; }
  .link { color:var(--accent); text-decoration:none; font-weight:600; }
  .link:hover { text-decoration:underline; }
  .endpoints { margin-top:20px; }
  .card-title { font-size:.8rem; font-weight:700; letter-spacing:.08em; text-transform:uppercase; color:var(--muted); margin-bottom:12px; }
  .card-sub { margin-bottom:12px; font-size:.82rem; line-height:1.45; }
  .providers { margin-top:20px; }
  .table-wrap { overflow-x:auto; }
  .geo-group { margin-bottom:16px; }
  .geo-group:last-child { margin-bottom:0; }
  .geo-group-title { font-size:.78rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:var(--accent); margin-bottom:8px; }
  .providers .muted { margin-top:4px; }
  .geo-table { width:100%; border-collapse:collapse; font-size:.82rem; }
  .geo-table th,.geo-table td { text-align:left; padding:8px 10px; border-bottom:1px solid var(--border); }
  .geo-table th { color:var(--muted); font-weight:600; font-size:.72rem; letter-spacing:.04em; text-transform:uppercase; }
  .geo-table td.none { color:var(--muted); }
  .geo-table td.geo-field { color:var(--muted); white-space:nowrap; }
  .geo-table tr:last-child td { border-bottom:none; }
  .ep { background:var(--card); border:1px solid var(--border); border-radius:12px; padding:14px 16px; margin-top:10px; }
  .ep:first-child { margin-top:0; }
  .ep-head { display:flex; align-items:center; justify-content:space-between; gap:12px; }
  .ep-title { font-size:.85rem; color:var(--muted); }
  .copy-btn {
    flex-shrink:0; cursor:pointer; border:1px solid var(--border); border-radius:8px;
    background:transparent; color:var(--fg); font-size:.75rem; padding:4px 10px; transition:border-color .15s,color .15s;
  }
  .copy-btn:hover { border-color:var(--accent); color:var(--accent); }
  .copy-btn.copied { border-color:var(--good); color:var(--good); }
  .cmd {
    font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.85rem; color:#c3cfe0;
    background:var(--bg); border:1px solid var(--border); border-radius:8px; padding:10px 12px;
    margin-top:10px; word-break:break-all; white-space:pre-wrap;
  }
  .cmd .cursor {
    display:inline-block; width:8px; height:14px; background:var(--fg); vertical-align:middle;
    margin-left:3px; animation:blink 1s steps(1) infinite;
  }
  @keyframes blink { 50% { opacity:0; } }
  .resp-toggle {
    flex-shrink:0; cursor:pointer; display:flex; align-items:center; gap:6px;
    font-size:.78rem; color:var(--accent); background:transparent; border:1px solid var(--border);
    border-radius:8px; padding:4px 10px; font-family:inherit;
  }
  .resp-toggle .chev { float:none; color:inherit; transition:transform .15s; }
  .resp-toggle.open .chev { transform:rotate(90deg); }
  pre.resp-answer { display:none; margin:0; }
  pre.resp-answer.open { display:block; margin-top:10px; }
  pre.ep-answer, pre.resp-answer {
    font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:.78rem; line-height:1.4;
    color:var(--good); background:var(--bg); border:1px solid var(--border); border-radius:8px; padding:12px;
    overflow-x:auto; white-space:pre-wrap; word-break:break-all;
  }
  .loading .dots span {
    display:inline-block; width:4px; height:4px; margin:0 2px; border-radius:50%;
    background:var(--muted); animation:bounce .6s infinite alternate;
  }
  .loading .dots span:nth-child(2) { animation-delay:.2s; }
  .loading .dots span:nth-child(3) { animation-delay:.4s; }
  @keyframes bounce { to { opacity:.25; transform:translateY(-3px); } }