@import url('https://fonts.googleapis.com/css2?family=DM+Mono:wght@400;500&family=Manrope:wght@400;500;600;700;800&display=swap');
:root{font-family:Manrope,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;color-scheme:dark;--bg:#090e1b;--surface:#101729;--surface2:#141e32;--border:#253149;--text:#edf2ff;--muted:#9aa8c1;--faint:#697995;--accent:#8b9cff;--green:#63e6be;--blue:#6da9ff;--shadow:0 20px 70px #0003;--radius:18px}
html[data-theme="light"]{color-scheme:light;--bg:#f5f7fc;--surface:#fff;--surface2:#eef2fa;--border:#dce3ef;--text:#172036;--muted:#5d6b83;--faint:#78869c;--accent:#4f60db;--green:#098c70;--blue:#286cce;--shadow:0 20px 70px #1d2d5010}
*{box-sizing:border-box}html{scroll-behavior:smooth}body{margin:0;background:radial-gradient(ellipse at 50% -20%,#293b6a33,transparent 52%),var(--bg);color:var(--text);min-height:100vh;font-size:14px;line-height:1.65}a{color:inherit;text-decoration:none}button,input,select{font:inherit}button,a,input,select{outline-offset:3px}button{cursor:pointer}.topbar{height:76px;border-bottom:1px solid var(--border);background:color-mix(in srgb,var(--bg) 88%,transparent);backdrop-filter:blur(18px);position:sticky;top:0;z-index:20}.nav-wrap{max-width:1160px;height:100%;margin:auto;padding:0 24px;display:flex;align-items:center;gap:36px}.brand{display:flex;align-items:center;gap:10px;font-weight:800;font-size:20px;letter-spacing:-.8px;line-height:1.15;flex-shrink:0}.brand small{display:block;font-size:9px;letter-spacing:1.8px;font-weight:700;color:var(--faint);margin-top:5px}.brand-mark{width:39px;height:39px;border-radius:13px;background:linear-gradient(140deg,#8194ff,#5d72e4);display:grid;place-items:center;box-shadow:0 5px 22px #677aff38}.brand-mark svg{width:24px;fill:none;stroke:white;stroke-width:1.5}.accent{color:var(--accent)}.main-nav{display:flex;align-items:center;gap:6px;flex:1}.main-nav a{padding:9px 13px;color:var(--muted);font-size:12px;font-weight:700;border-radius:10px;white-space:nowrap}.main-nav a:hover,.main-nav a.active{background:var(--surface2);color:var(--text)}.nav-actions{display:flex;gap:8px}.icon-btn,.menu-btn{width:38px;height:38px;border:1px solid var(--border);border-radius:11px;background:var(--surface);color:var(--text);font-size:18px}.menu-btn{display:none}.container{max-width:1100px;padding:0 24px;margin:0 auto;min-height:60vh}.hero{padding:64px 0 30px}.eyebrow{font-size:10px;font-weight:800;letter-spacing:1.65px;color:var(--accent);display:flex;align-items:center;gap:8px}.live-dot,.status-dot{width:7px;height:7px;display:inline-block;border-radius:50%;background:var(--green);box-shadow:0 0 12px #63e6be70}.hero h1,.page-intro h1{font-size:clamp(35px,5vw,54px);letter-spacing:-2.5px;line-height:1.15;margin:18px 0 13px;font-weight:800}.gradient-text{background:linear-gradient(110deg,#9eabff 5%,#6dcfff 55%,#65e6c0 100%);-webkit-background-clip:text;background-clip:text;color:transparent}.hero-copy,.page-intro>p{color:var(--muted);max-width:660px;font-size:15px;margin:0;line-height:1.8}.ip-grid{display:grid;grid-template-columns:minmax(0,1.7fr) minmax(220px,.8fr);gap:17px;margin-top:34px}.ip-card,.mini-card,.panel{border:1px solid var(--border);border-radius:var(--radius);background:linear-gradient(145deg,var(--surface),color-mix(in srgb,var(--surface) 85%,var(--surface2)));box-shadow:var(--shadow)}.ip-card{padding:28px;position:relative;overflow:hidden}.ip-card:after{content:"";position:absolute;width:270px;height:270px;right:-130px;top:-170px;background:#8293ff12;border-radius:50%;pointer-events:none}.card-top,.mini-head{display:flex;align-items:center;justify-content:space-between;gap:12px}.label{font-size:9px;letter-spacing:1.15px;font-weight:800;color:var(--muted)}.pill{font-size:9px;font-weight:800;letter-spacing:1px;color:var(--green);border:1px solid #63e6be42;background:#63e6be0d;padding:5px 8px;border-radius:7px}.ip-value{font-family:"DM Mono",monospace;font-size:clamp(28px,4vw,43px);letter-spacing:-1.6px;line-height:1.35;overflow-wrap:anywhere;margin:23px 0 4px;font-weight:500}.ip-note{color:var(--muted);font-size:12px}.button-row{display:flex;gap:9px;flex-wrap:wrap;margin-top:23px}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border-radius:10px;padding:10px 15px;border:1px solid var(--border);font-weight:800;font-size:11px;transition:transform .15s,opacity .15s}.btn:hover{transform:translateY(-1px)}.btn:disabled{opacity:.5;cursor:wait}.btn-primary{background:linear-gradient(120deg,#8293ff,#697ce9);color:#fff;border-color:transparent;box-shadow:0 6px 20px #6578ed28}.btn-ghost{background:var(--surface2);color:var(--text)}.ip-meta{display:flex;gap:16px;flex-wrap:wrap;border-top:1px solid var(--border);margin-top:24px;padding-top:17px;color:var(--muted);font-size:10px}.mini-icon{font-style:normal;color:var(--accent);margin-right:5px}.side-stack{display:grid;gap:17px}.mini-card{padding:21px;display:flex;flex-direction:column;justify-content:center;min-height:140px}.mini-head{justify-content:flex-start;gap:10px}.mini-symbol,.tool-icon{display:grid;place-items:center;border-radius:11px;width:37px;height:37px;font-size:19px;background:#8293ff17;color:#9eabff}.mini-symbol.green{color:var(--green);background:#63e6be12}.mini-symbol.violet{color:#b6a0ff}.mini-card>strong{font-size:22px;margin:13px 0 1px;letter-spacing:-.5px}.mini-card p{color:var(--muted);font-size:11px;margin:0}.privacy-note{display:flex;gap:11px;align-items:flex-start;padding:16px 18px;border:1px solid #63e6be23;background:#63e6be08;border-radius:12px;margin-top:17px;color:var(--muted);font-size:11px}.privacy-note>span:first-child{color:var(--green);font-size:17px}.privacy-note strong{color:var(--text)}.section{padding:50px 0}.section-heading{display:flex;align-items:end;justify-content:space-between;gap:20px;margin-bottom:22px}.section-heading h2,.bottom-callout h2{font-size:23px;letter-spacing:-.8px;line-height:1.35;margin:9px 0 0;max-width:590px}.text-link{font-weight:800;font-size:11px;color:var(--accent);white-space:nowrap}.tool-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:13px}.tool-card{position:relative;display:flex;flex-direction:column;align-items:flex-start;min-height:180px;padding:21px;border:1px solid var(--border);border-radius:15px;background:var(--surface);transition:transform .18s,border-color .18s,background .18s}.tool-card:hover{transform:translateY(-3px);border-color:color-mix(in srgb,var(--accent) 60%,var(--border));background:var(--surface2)}.tool-icon{width:39px;height:39px;margin-bottom:17px}.tool-icon.violet{color:#b6a0ff;background:#a58bff17}.tool-icon.green{color:var(--green);background:#63e6be12}.tool-icon.orange{color:#ffbd78;background:#ffbd7815}.tool-icon.pink{color:#ff8fbe;background:#ff8fbe15}.tool-icon.cyan{color:#71dafa;background:#71dafa15}.tool-title{font-size:13px;font-weight:800}.tool-desc{font-size:11px;line-height:1.7;color:var(--muted);margin-top:6px;max-width:260px}.tool-arrow{position:absolute;right:18px;top:20px;color:var(--faint);font-size:16px}.bottom-callout{display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:25px;padding:27px;border:1px solid var(--border);border-radius:var(--radius);background:linear-gradient(120deg,#818fff10,#64e7c00a);margin:12px 0 60px}.bottom-callout h2{font-size:21px}.bottom-callout p{font-size:12px;color:var(--muted);margin-bottom:0}.terminal{border:1px solid var(--border);border-radius:12px;overflow:hidden;background:#080d18}.terminal-top{height:33px;background:#131b2b;display:flex;align-items:center;gap:5px;padding:0 11px}.terminal-top>span{width:7px;height:7px;border-radius:50%;background:#53617a}.terminal-top small{margin-left:auto;color:#8391aa;font-size:9px}.terminal code{display:block;padding:18px 14px 5px;color:#d6e3ff;font:11px "DM Mono",monospace;overflow-wrap:anywhere}.terminal code i{color:var(--green);font-style:normal}.copy-command{background:transparent;border:0;color:#8d9dff;font-size:10px;padding:10px 14px 14px}.footer{border-top:1px solid var(--border);background:color-mix(in srgb,var(--surface) 40%,transparent)}.footer-inner{max-width:1100px;padding:28px 24px 24px;margin:auto;display:flex;align-items:center;gap:20px;flex-wrap:wrap}.footer-brand{font-size:17px}.footer-brand .brand-mark{width:32px;height:32px;border-radius:10px}.footer-brand .brand-mark svg{width:20px}.footer-inner>p{color:var(--muted);font-size:10px;margin-right:auto}.footer-links{display:flex;gap:15px}.footer-links a,.copyright{font-size:10px;color:var(--muted)}.page-intro{padding:62px 0 27px}.page-intro h1{margin-top:14px}.panel{padding:25px;margin-bottom:55px}.tool-panel{padding:25px}.form-row{display:flex;align-items:end;gap:12px;flex-wrap:wrap}.field{display:flex;flex-direction:column;gap:7px;min-width:150px}.field.grow{flex:1}.field>span{font-size:11px;color:var(--muted);font-weight:800}.field input,.field select{width:100%;min-height:44px;padding:10px 12px;border:1px solid var(--border);border-radius:10px;background:var(--bg);color:var(--text);font-size:12px}.field input:focus,.field select:focus{border-color:var(--accent)}.result-area{margin-top:23px}.empty-state,.loading,.error-state{padding:24px;border:1px dashed var(--border);border-radius:12px;color:var(--muted);font-size:12px;text-align:center}.error-state{color:#ff929b;border-color:#ff929b50}.fine-print{font-size:10px;color:var(--faint);line-height:1.8;margin:18px 0 0}.lookup-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.lookup-item{padding:13px;border:1px solid var(--border);background:var(--surface2);border-radius:10px;min-width:0}.lookup-item span{display:block;font-size:10px;color:var(--muted);margin-bottom:5px}.lookup-item strong{display:block;font-size:12px;overflow-wrap:anywhere}.test-list{margin-bottom:18px}.test-row{display:flex;justify-content:space-between;align-items:center;gap:18px;padding:17px 0;border-bottom:1px solid var(--border)}.test-row:first-child{padding-top:0}.test-row strong{font-size:12px}.test-row p{font-size:10px;color:var(--muted);margin:3px 0 0}.result-badge{display:inline-flex;align-items:center;white-space:nowrap;border-radius:7px;padding:5px 9px;font-size:9px;font-weight:800;background:var(--surface2);color:var(--muted)}.result-badge.good{color:var(--green);background:#63e6be13}.result-badge.bad{color:#ff929b;background:#ff929b13}.result-badge.warn{color:#ffc078;background:#ffc07813}.result-badge.pending{color:var(--muted)}.dns-provider{border:1px solid var(--border);border-radius:12px;padding:15px;margin-bottom:12px}.dns-provider-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:12px}.dns-provider-head strong{font-size:12px}.table-wrap{overflow:auto}table{border-collapse:collapse;width:100%;font-size:11px;text-align:left}th,td{padding:10px;border-bottom:1px solid var(--border);vertical-align:top}th{color:var(--muted);font-size:9px;text-transform:uppercase;letter-spacing:.8px}td code,.code-block code{font-family:"DM Mono",monospace}.break-word{overflow-wrap:anywhere}.muted{color:var(--muted);font-size:11px}.docs-panel h2,.prose h2{font-size:16px;letter-spacing:-.3px;margin:26px 0 8px}.docs-panel h2:first-child,.prose h2:first-child{margin-top:0}.docs-panel p,.prose p,.prose li{font-size:12px;color:var(--muted);line-height:1.9}.code-block{display:flex;align-items:center;gap:10px;justify-content:space-between;padding:13px;background:#080d18;border:1px solid var(--border);border-radius:10px;margin:9px 0;min-width:0}.code-block code{font-size:11px;color:#cbd8f8;overflow-wrap:anywhere}.code-block button{border:0;background:#1c2740;color:#b3bfff;border-radius:7px;padding:6px 9px;font-size:10px;flex-shrink:0}.json-example{background:#080d18;color:#c8d7f5;border:1px solid var(--border);border-radius:10px;padding:17px;overflow:auto;font:11px/1.8 "DM Mono",monospace}.feature-list{padding-left:20px}.feature-list li{margin:7px 0}.all-tools{margin:0 0 55px}.all-tools .tool-card{min-height:160px}.toast{position:fixed;bottom:25px;left:50%;transform:translate(-50%,15px);opacity:0;pointer-events:none;z-index:50;background:var(--text);color:var(--bg);padding:10px 16px;border-radius:10px;font-size:11px;font-weight:800;box-shadow:var(--shadow);transition:all .2s}.toast.show{opacity:1;transform:translate(-50%,0)}@media(max-width:850px){.nav-wrap{gap:18px}.main-nav{gap:0}.main-nav a{padding:8px;font-size:11px}.ip-grid{grid-template-columns:1fr}.side-stack{grid-template-columns:1fr 1fr}.tool-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.footer-inner{gap:14px}}@media(max-width:620px){.topbar{height:66px}.nav-wrap{padding:0 17px;justify-content:space-between}.brand{font-size:18px}.brand-mark{width:35px;height:35px}.menu-btn{display:block}.main-nav{display:none;position:absolute;top:65px;left:12px;right:12px;padding:10px;background:var(--surface);border:1px solid var(--border);border-radius:13px;box-shadow:var(--shadow);flex-direction:column;align-items:stretch}.main-nav.open{display:flex}.main-nav a{padding:11px}.container{padding:0 17px}.hero{padding-top:45px}.hero h1,.page-intro h1{letter-spacing:-1.7px}.ip-card{padding:20px}.ip-value{font-size:clamp(25px,7vw,37px)}.side-stack{gap:10px}.mini-card{padding:14px;min-height:125px}.section{padding:38px 0}.section-heading{align-items:start}.section-heading h2{font-size:20px}.tool-grid{gap:10px}.tool-card{padding:16px;min-height:180px}.tool-desc{font-size:10px}.bottom-callout{grid-template-columns:1fr;padding:20px;margin-bottom:40px}.page-intro{padding-top:43px}.panel,.tool-panel{padding:17px}.form-row>.btn{width:100%;min-height:43px}.field{width:100%}.lookup-grid{grid-template-columns:1fr}.footer-inner{padding:24px 17px;display:grid;grid-template-columns:1fr 1fr}.footer-inner>p{grid-column:1/-1;grid-row:2;margin:0}.footer-links{grid-column:1/-1;grid-row:3;flex-wrap:wrap}.copyright{grid-column:1/-1}.code-block{align-items:flex-start}.code-block code{font-size:10px}.code-block button{font-size:9px}}@media(prefers-reduced-motion:reduce){*,*:before,*:after{scroll-behavior:auto!important;transition:none!important}}

/* WANIP: separate IPv4/IPv6 address cards */
.detected-ip {
  position: relative;
  min-width: 0;
  padding: 16px;
  margin-top: 14px;
  border: 1px solid var(--border);
  border-radius: 12px;
  background: color-mix(in srgb, var(--surface2) 55%, transparent);
}

.ip-family-heading {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}

.detected-ip .ip-value {
  min-width: 0;
  margin: 12px 0 7px;
  font-family: "DM Mono", monospace;
  font-size: clamp(17px, 2.1vw, 25px);
  line-height: 1.65;
  letter-spacing: -0.5px;
  overflow-wrap: anywhere;
  word-break: normal;
  font-variant-numeric: tabular-nums;
}

.detected-ip .ip-note {
  overflow-wrap: anywhere;
}

.detected-ip .button-row {
  margin-top: 13px;
}

.detected-ip .btn {
  position: relative;
  z-index: 1;
}

.ip-card > .button-row {
  margin-top: 18px;
}

.ip-card .detected-ip + .detected-ip {
  margin-top: 12px;
}

@media (max-width: 620px) {
  .detected-ip {
    padding: 13px;
  }

  .detected-ip .ip-value {
    font-size: clamp(16px, 4.5vw, 22px);
    letter-spacing: -0.4px;
  }
}