@import url('fonts/fonts.css');
:root {
  color-scheme:light;
  --bg:#f7f8fb;
  --surface:#fff;
  --text:#202435;
  --muted:#79808f;
  --line:#e9eaf0;
  --accent:#5b5ce2;
  --tint:#f0f0ff;
  --green:#16836d;
  --green-bg:#eaf8f3;
  --amber:#a87523;
  --amber-bg:#fff6e7;
  --shadow:0 4px 22px #26274603
}

* {
  box-sizing:border-box
}

html {
  scroll-behavior:smooth
}

body {
  margin:0;
  background:var(--bg);
  color:var(--text);
  font:16px/1.65 'Noto Sans SC',system-ui,sans-serif
}

body.dark {
  color-scheme:dark;
  --bg:#101218;
  --surface:#181b23;
  --text:#e8eaf3;
  --muted:#9a9faf;
  --line:#2a2e3a;
  --accent:#a3a3ff;
  --tint:#282842;
  --green:#6dd5b7;
  --green-bg:#193b33;
  --amber:#e1bc77;
  --amber-bg:#392f20
}

button,a,input,summary {
  -webkit-tap-highlight-color:transparent
}

button {
  font:inherit;
  cursor:pointer
}

button:disabled {
  cursor:wait;
  opacity:.6
}

button:focus-visible,a:focus-visible,summary:focus-visible,input:focus-visible+.switch {
  outline:3px solid var(--accent);
  outline-offset:4px
}

button {
  transition:background .15s,transform .15s
}

button:hover {
  filter:brightness(.96)
}

header {
  height:82px;
  border-bottom:1px solid var(--line);
  padding:0 max(28px,calc((100vw - 1160px)/2));
  display:flex;
  justify-content:space-between;
  align-items:center;
  background:var(--surface)
}

.brand {
  display:flex;
  align-items:center;
  gap:12px;
  font:700 22px system-ui,sans-serif;
  letter-spacing:-.7px;
  text-decoration:none;
  color:var(--text)
}

.mark {
  display:grid;
  place-items:center;
  width:33px;
  height:33px;
  border-radius:10px;
  background:#5b5ce2;
  color:white;
  font-size:22px;
  font-weight:600
}

.brand-logo {
  width: 36px;
  height: 36px;
  flex: 0 0 36px;
  object-fit: contain;
}

.brand-sub {
  font-size:12px;
  font-weight:400;
  letter-spacing:2px;
  color:var(--muted);
  padding-left:5px
}

.icon-btn {
  width:38px;
  height:38px;
  border:1px solid var(--line);
  background:var(--surface);
  border-radius:50%;
  font-size:23px;
  color:var(--text)
}

main {
  max-width:1160px;
  margin:0 auto;
  padding:45px 0 32px
}

.heading {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:35px
}

.eyebrow {
  font:500 11px 'IBM Plex Mono',monospace;
  letter-spacing:2px;
  color:var(--accent);
  margin-bottom:11px
}

h1 {
  font-size:32px;
  line-height:1.4;
  letter-spacing:-1px;
  margin:0 0 8px
}

.slash {
  font-weight:400;
  color:#b7b8e9;
  padding-left:8px
}

.heading p,.section-head p {
  margin:0;
  color:var(--muted);
  font-size:14px
}

.primary {
  display:flex;
  gap:9px;
  align-items:center;
  background:#5b5ce2;
  color:#fff;
  border:none;
  border-radius:9px;
  padding:11px 19px;
  font-size:14px;
  box-shadow:0 4px 9px #5b5ce218
}

.primary span {
  font-size:22px;
  line-height:1
}

.section-label {
  display:flex;
  justify-content:space-between;
  align-items:center;
  font-size:13px;
  color:var(--muted);
  margin-bottom:12px
}

.section-label>span:first-child {
  color:var(--text);
  font-size:14px;
  font-weight:500;
  display:flex;
  align-items:center;
  gap:9px
}

.live-dot {
  height:7px;
  width:7px;
  background:var(--accent);
  border-radius:50%
}

.overview {
  display:grid;
  grid-template-columns:1.12fr 1fr;
  gap:20px
}

.panel {
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:14px;
  box-shadow:var(--shadow)
}

.main-panel {
  display:grid;
  grid-template-rows:repeat(2,minmax(194px,1fr));
  padding:0 28px
}

.protocol {
  padding:24px 0;
  min-height:194px
}

.protocol+.protocol {
  border-top:1px solid var(--line)
}

.protocol-head,.panel-heading,.source-head {
  display:flex;
  justify-content:space-between;
  align-items:center;
  gap:10px
}

.protocol-label {
  font:500 14px 'IBM Plex Mono',monospace;
  display:flex;
  align-items:center;
  gap:10px
}

.version {
  padding:2px 7px;
  background:var(--tint);
  border-radius:5px;
  color:var(--accent);
  font-size:11px
}

.badge {
  font-size:12px;
  border-radius:5px;
  padding:2px 7px;
  background:var(--green-bg);
  color:var(--green);
  white-space:nowrap
}

.badge.warn {
  background:var(--amber-bg);
  color:var(--amber)
}

.badge.neutral {
  background:var(--bg);
  color:var(--muted)
}

.ip-line {
  display:flex;
  align-items:center;
  gap:9px;
  margin:12px 0 16px;
  min-height:39px
}

.ip {
  font:500 clamp(21px,2.4vw,31px)/1.4 'IBM Plex Mono',monospace;
  letter-spacing:-1.1px;
  overflow-wrap:anywhere
}

.ip.v6 {
  font-size:18px;
  letter-spacing:-.6px
}

.ip.empty {
  font:400 18px 'Noto Sans SC',sans-serif;
  letter-spacing:0;
  color:var(--muted)
}

.copy {
  flex-shrink:0;
  border:0;
  background:transparent;
  color:var(--muted);
  font-size:19px;
  padding:4px 7px;
  border-radius:4px
}

.copy:hover {
  background:var(--tint);
  color:var(--accent)
}

.geo-grid {
  display:grid;
  grid-template-columns:1.2fr 1fr;
  gap:9px 16px
}

.meta-label {
  font-size:11px;
  color:var(--muted);
  letter-spacing:.5px
}

.meta-value {
  font-size:14px;
  overflow-wrap:anywhere
}

.asn {
  grid-column:1/-1;
  display:flex;
  align-items:baseline;
  gap:12px
}

.asn .meta-value {
  font-size:12px
}

.hint {
  font-size:13px;
  color:var(--muted);
  margin:0
}

.sources-panel {
  padding:23px 25px 16px
}

.panel-heading {
  margin-bottom:5px
}

h2 {
  font-size:16px;
  font-weight:600;
  margin:0
}

.small {
  font-size:12px;
  color:var(--muted)
}

.source {
  padding:13px 0;
  border-bottom:1px solid var(--line)
}

.source:last-child {
  border-bottom:0
}

.source-name {
  font:500 14px 'IBM Plex Mono',monospace
}

.tag {
  font-size:11px;
  color:var(--muted);
  background:var(--bg);
  border:1px solid var(--line);
  padding:1px 6px;
  border-radius:4px
}

.source-value {
  display:flex;
  justify-content:space-between;
  gap:10px;
  font:400 14px/1.7 'IBM Plex Mono',monospace;
  margin-top:7px
}

.source-state {
  font:400 12px/1.7 'Noto Sans SC',sans-serif;
  color:var(--muted)
}

.source-note {
  font-size:12px;
  color:var(--muted);
  margin:12px 0 0
}

.source-note.split-detected {
  color:var(--accent);
  font-weight:500
}

.user-agent-panel {
  display:flex;
  align-items:center;
  gap:22px;
  padding:16px 19px;
  margin-top:16px
}

.user-agent-heading {
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  min-width:190px
}

.user-agent-heading>div {
  display:flex;
  align-items:baseline;
  gap:10px
}

.user-agent-panel code {
  min-width:0;
  flex:1;
  color:var(--muted);
  font:12px/1.65 'IBM Plex Mono',monospace;
  overflow-wrap:anywhere
}

.user-agent-panel .copy {
  order:3
}

.privacy-bar {
  display:flex;
  justify-content:space-between;
  gap:18px;
  align-items:center;
  border:1px solid var(--line);
  border-radius:10px;
  padding:13px 19px;
  margin:16px 0 33px;
  background:var(--surface);
  font-size:13px
}

.privacy-title {
  color:var(--muted);
  display:flex;
  gap:9px;
  align-items:center
}

.privacy-title>span {
  color:var(--accent);
  font-size:20px
}

.switches {
  display:flex;
  gap:27px
}

.switches label {
  display:flex;
  gap:10px;
  align-items:center;
  position:relative;
  cursor:pointer
}

.switches input {
  position:absolute;
  right:0;
  width:32px;
  height:20px;
  opacity:0
}

.switch {
  width:30px;
  height:17px;
  background:#d8dce5;
  border-radius:12px;
  position:relative;
  pointer-events:none;
  transition:.2s
}

.switch:after {
  content:'';
  position:absolute;
  top:3px;
  left:3px;
  width:11px;
  height:11px;
  background:white;
  border-radius:50%;
  transition:.2s
}

input:checked+.switch {
  background:#5b5ce2
}

input:checked+.switch:after {
  transform:translateX(13px)
}

.section-head {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-bottom:18px
}

.section-head h2 {
  font-size:19px;
  margin-bottom:4px
}

.section-head p {
  font-size:13px
}

.summary {
  font-size:12px;
  color:var(--muted)
}

.targets {
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:12px
}

.target {
  background:var(--surface);
  border:1px solid var(--line);
  border-radius:10px;
  padding:17px 17px 13px
}

.target-top {
  display:flex;
  gap:11px;
  align-items:center
}

.target-icon {
  font:bold 16px system-ui,sans-serif;
  width:33px;
  height:33px;
  border-radius:9px;
  display:grid;
  place-items:center;
  background:var(--icon-bg);
  color:var(--icon-color)
}

.target-name {
  font-size:14px;
  font-weight:500
}

.region {
  font-size:11px;
  color:var(--muted)
}

.target-bottom {
  display:flex;
  justify-content:space-between;
  align-items:center;
  margin-top:16px
}

.target-status {
  font-size:12px;
  color:var(--muted)
}

.target-status.ok {
  color:var(--green)
}

.target-status.fail {
  color:var(--amber)
}

.probe-history { display:flex; gap:6px; margin-top:14px; align-items:center }
.probe-dot { width:8px; height:8px; border-radius:50%; background:var(--line); flex:0 0 8px }
.probe-dot.ok { background:var(--green) }
.probe-dot.fail { background:var(--amber) }
.probe-dot.pending { background:var(--accent); animation:probe-pulse 1s ease-in-out infinite alternate }
@keyframes probe-pulse { to { opacity:.3 } }
@media (prefers-reduced-motion:reduce) { .probe-dot.pending { animation:none } }

.latency {
  font:500 17px 'IBM Plex Mono',monospace
}

.latency small {
  font:400 11px system-ui;
  color:var(--muted);
  padding-left:4px
}

.test-note {
  display:flex;
  gap:8px;
  color:var(--muted);
  font-size:12px;
  margin:15px 0 28px
}

.test-note p {
  margin:0
}

details {
  border-top:1px solid var(--line);
  font-size:13px;
  color:var(--muted);
  padding-top:18px
}

summary {
  cursor:pointer;
  width:fit-content
}

details p {
  max-width:850px
}

a {
  color:var(--accent)
}

footer {
  max-width:1160px;
  margin:auto;
  padding:23px 0 28px;
  border-top:1px solid var(--line);
  display:flex;
  justify-content:space-between;
  color:var(--muted);
  font-size:12px
}

footer b {
  color:var(--text);
  font:600 14px system-ui
}

.footer-sep {
  margin:0 9px;
  color:#c0c4cf
}

#toast {
  position:fixed;
  bottom:24px;
  left:50%;
  transform:translateX(-50%);
  background:var(--text);
  color:var(--surface);
  border-radius:8px;
  padding:9px 18px;
  font-size:14px;
  opacity:0;
  pointer-events:none;
  transition:.2s
}

#toast.show {
  opacity:1
}

@media(max-width:1220px) {
  main,footer {
    margin-left:28px;
    margin-right:28px
  }

}

@media(max-width:760px) {
  header {
    height:66px;
    padding:0 20px
  }

  .brand-sub {
    display:none
  }

  main {
    padding-top:29px;
    margin:0 20px
  }

  .heading {
    gap:12px;
    margin-bottom:25px
  }

  .eyebrow {
    font-size:10px;
    letter-spacing:1px
  }

  h1 {
    font-size:26px
  }

  .heading p {
    font-size:13px;
    max-width:210px
  }

  .primary {
    padding:9px 12px;
    white-space:nowrap
  }

  .overview {
    grid-template-columns:1fr;
    gap:14px
  }

  .user-agent-panel {
    align-items:flex-start;
    gap:10px;
    padding:14px;
    flex-wrap:wrap
  }

  .user-agent-heading {
    width:100%
  }

  .user-agent-panel code {
    flex-basis:calc(100% - 40px)
  }

  .targets {
    grid-template-columns:repeat(2,1fr)
  }

  .privacy-bar {
    padding:12px;
    flex-wrap:wrap
  }

  .switches {
    gap:18px
  }

  .section-head {
    align-items:flex-start;
    gap:10px
  }

  .summary {
    white-space:nowrap;
    padding-top:7px
  }

  .main-panel {
    padding:0 22px
  }

  .ip {
    font-size:28px
  }

  .ip.v6 {
    font-size:17px
  }

  .protocol {
    min-height:182px
  }

  .sources-panel {
    padding:20px 22px
  }

  .target {
    padding:14px 12px
  }

  footer {
    margin:0 20px;
    flex-direction:column;
    gap:8px
  }

}

@media(prefers-reduced-motion:reduce) {
  * {
    scroll-behavior:auto!important;
    transition:none!important
  }

}

.location-value {
  display:flex;
  align-items:center;
  gap:7px
}

.country-flag {
  width:24px;
  height:24px;
  flex:0 0 24px;
  object-fit:contain;
  border-radius:50%;
  box-shadow:0 0 0 1px var(--line)
}

.country-flag[hidden],.service-icon[hidden] {
  display:none
}

.target-icon {
  position:relative;
  flex-shrink:0;
  overflow:hidden
}

.service-icon {
  position:absolute;
  inset:6px;
  width:21px;
  height:21px;
  object-fit:contain
}

.icon-loaded .icon-fallback {
  visibility:hidden
}

.whois-shortcut {
  border:1px solid var(--line);
  border-radius:5px;
  background:var(--surface);
  color:var(--accent);
  font:500 11px/1.4 'IBM Plex Mono',monospace;
  padding:5px 7px;
  flex-shrink:0
}

.ip-line {
  flex-wrap:wrap
}

.ip {
  min-width:0
}

.whois-panel {
  padding:22px 25px;
  margin-bottom:32px
}

.whois-panel .panel-heading {
  margin-bottom:14px
}

.whois-panel form {
  display:flex;
  gap:10px;
  margin-bottom:10px
}

.whois-panel input {
  min-width:0;
  flex:1;
  border:1px solid var(--line);
  background:var(--bg);
  color:var(--text);
  border-radius:8px;
  padding:11px 13px;
  font:400 14px/1.6 'IBM Plex Mono',system-ui,sans-serif
}

.whois-panel input:focus-visible {
  outline:2px solid var(--accent);
  outline-offset:2px
}

.whois-panel input::placeholder {
  color:var(--muted)
}

.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
}

#whois-result:not(:empty) {
  margin-top:18px;
  border-top:1px solid var(--line);
  padding-top:15px;
  font-size:14px
}

.lookup-grid {
  margin:0;
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:15px 25px
}

.lookup-grid dt {
  font-size:12px;
  color:var(--muted)
}

.lookup-grid dd {
  margin:4px 0 0;
  overflow-wrap:anywhere
}

.lookup-raw {
  margin-top:18px;
  margin-bottom:14px
}

.lookup-raw pre {
  white-space:pre-wrap;
  overflow-wrap:anywhere;
  font:12px/1.6 'IBM Plex Mono',monospace;
  max-height:320px;
  overflow:auto
}

.lookup-error {
  color:var(--amber)
}

@media(max-width:760px) {
  .whois-panel {
    padding:19px 20px
  }

  .whois-panel input {
    font-size:16px
  }

  .whois-panel .small {
    font-size:11px
  }

  .lookup-grid {
    grid-template-columns:1fr
  }

  .geo-grid {
    grid-template-columns:1fr
  }

  .whois-panel input::placeholder {
    font-size:12px
  }

}

.domain-statuses {
  margin-top:22px;
  padding-top:18px;
  border-top:1px solid var(--line)
}

.domain-statuses h3 {
  font-size:14px;
  margin:0 0 12px
}

.domain-status {
  display:flex;
  flex-wrap:wrap;
  gap:7px 12px;
  margin:12px 0;
  align-items:center
}

.domain-status code {
  font:12px 'IBM Plex Mono',monospace;
  color:var(--muted);
  overflow-wrap:anywhere
}

.domain-status p {
  flex-basis:100%;
  margin:0;
  color:var(--muted);
  font-size:13px
}

.status-help {
  font-size:12px
}

.original-domain {
  display:block;
  margin-top:4px;
  color:var(--muted);
  overflow-wrap:anywhere
}

.footer-left {
  display:flex;
  flex-direction:column;
  align-items:flex-start;
  gap:7px
}

.copyright {
  font-size:12px
}

.copyright a {
  color:inherit;
  text-underline-offset:3px
}

.copyright a:hover {
  color:var(--accent)
}