/* prefixkit — one idea: the address is a row of bits, network in cobalt, host in amber. */

:root {
  --bg: #EEF1F4;
  --surface: #FFFFFF;
  --ink: #18212E;
  --muted: #566273;
  --rule: #CCD4DE;
  --net: #2453C2;
  --net-ink: #FFFFFF;
  --host: #E0A21C;
  --host-ink: #2A1E04;
  --edge: #18212E;
  --err: #B3261E;
  --land: #C5D0DD;
  --land-hover: #9FB3CC;
  --net-soft: #E3EAF9;
  --host-soft: #FBEFD3;
  --sans: 'Atkinson Hyperlegible Next', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'Atkinson Hyperlegible Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  color-scheme: light;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #10161F;
    --surface: #18202C;
    --ink: #E3E8EF;
    --muted: #9AA6B6;
    --rule: #2C3848;
    --net: #6F9BFF;
    --net-ink: #0B1220;
    --host: #F0B43C;
    --host-ink: #221803;
    --edge: #E3E8EF;
    --err: #FF8A80;
    --land: #2B3747;
    --land-hover: #3D4D63;
    --net-soft: #1C2A45;
    --host-soft: #3A2E14;
    color-scheme: dark;
  }
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 1.0625rem;
  line-height: 1.55;
}

a { color: var(--net); text-underline-offset: 0.18em; }
a:hover { text-decoration-thickness: 2px; }

:focus-visible { outline: 3px solid var(--net); outline-offset: 2px; border-radius: 3px; }

code, .mono { font-family: var(--mono); }
code { font-size: 0.95em; }

h1, h2, h3 { line-height: 1.15; margin: 0; }
h1 { font-size: clamp(2rem, 5vw, 2.75rem); font-weight: 700; letter-spacing: -0.015em; }
h2 { font-size: 1.375rem; font-weight: 700; }
h3 { font-size: 1.0625rem; font-weight: 700; }

.wrap { max-width: 62rem; margin: 0 auto; padding-inline: 1rem; }
@media (min-width: 48rem) { .wrap { padding-inline: 1.5rem; } }

.skip { position: absolute; left: -999px; top: 0.5rem; background: var(--surface); padding: 0.5rem 0.75rem; }
.skip:focus { left: 0.5rem; }

/* ---------------------------------------------------------------- header */

header.site { border-bottom: 1px solid var(--rule); }
.bar { display: flex; align-items: center; gap: 1.25rem; min-height: 3.75rem; flex-wrap: wrap; }
.wordmark { display: inline-flex; align-items: center; gap: 0.55rem; color: var(--ink); text-decoration: none; font-weight: 700; font-size: 1.15rem; letter-spacing: -0.01em; }
.mark { width: 2.4rem; height: 0.6rem; }
.mark .n { fill: var(--net); }
.mark .h { fill: var(--host); }
header nav { display: flex; gap: 0.85rem; margin-right: auto; font-size: 0.95rem; white-space: nowrap; }
.bar { flex-wrap: nowrap; }
@media (max-width: 70rem) { .bar { flex-wrap: wrap; } header nav { order: 3; width: 100%; margin: 0; overflow-x: auto; white-space: nowrap; scrollbar-width: none; } .lang { margin-left: auto; } }
header nav a, .lang { color: var(--ink); text-decoration: none; padding-block: 0.3rem; border-bottom: 3px solid transparent; }
header nav a:hover, .lang:hover { border-bottom-color: var(--rule); }
header nav a[aria-current="page"] { border-bottom-color: var(--net); }
.lang { color: var(--muted); font-size: 0.95rem; }

@media (max-width: 34rem) {
  .bar { gap: 0.25rem 1rem; padding-block: 0.6rem; }
  header nav { order: 3; width: 100%; margin: 0; overflow-x: auto; white-space: nowrap; scrollbar-width: none; }
  .lang { margin-left: auto; }
}

/* ---------------------------------------------------------------- page */

main { padding-block: 2.25rem 4rem; }
.intro { margin-bottom: 1.5rem; }
.lede { color: var(--muted); max-width: 62ch; margin: 0.75rem 0 0; font-size: 1.125rem; }
.crumbs { margin: 0 0 0.5rem; font-size: 0.95rem; }

/* ---------------------------------------------------------------- calculator */

.tool {
  background: var(--surface);
  border: 1px solid var(--rule);
  border-radius: 10px;
  padding: 1.25rem;
}
@media (min-width: 48rem) { .tool { padding: 1.75rem 2rem 2rem; } }

.entry > label, .prefixctl label { display: block; font-weight: 700; margin-bottom: 0.4rem; }
.entry input[type="text"] {
  width: 100%;
  font: 600 clamp(1.15rem, 3.4vw, 1.6rem) / 1.3 var(--mono);
  color: var(--ink);
  background: var(--bg);
  border: 2px solid var(--rule);
  border-radius: 8px;
  padding: 0.6rem 0.8rem;
}
.entry input[type="text"]:focus { outline: none; border-color: var(--net); }
.entry input[aria-invalid="true"], .entry input[aria-invalid="true"]:focus { border-color: var(--err); }
.hint { color: var(--muted); font-size: 0.9rem; margin: 0.4rem 0 0; }
.err { color: var(--err); font-weight: 700; margin: 0.5rem 0 0; }

.prefixctl {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: center;
  gap: 0.25rem 1rem;
  margin-top: 1.25rem;
}
.prefixctl label { margin: 0; }
.pfx { font: 600 1.6rem/1 var(--mono); color: var(--net); justify-self: end; }
.prefixctl input[type="range"] { grid-column: 1 / -1; width: 100%; accent-color: var(--net); margin: 0.4rem 0 0; }

.body { transition: opacity 0.15s; }
.body.stale { opacity: 0.4; }

/* the bit ruler */
.ruler { display: grid; gap: 0.75rem 0.6rem; margin-top: 1.5rem; }
.ruler-ipv4 { grid-template-columns: repeat(2, 1fr); }
.ruler-ipv6 { grid-template-columns: repeat(2, 1fr); gap: 0.6rem 0.5rem; }
@media (min-width: 40rem) { .ruler-ipv4 { grid-template-columns: repeat(4, 1fr); } }
@media (min-width: 56rem) { .ruler-ipv6 { grid-template-columns: repeat(4, 1fr); } }

.grp { display: flex; flex-direction: column; gap: 0.3rem; min-width: 0; }
.cells { display: grid; gap: 2px; }
.ruler-ipv4 .cells { grid-template-columns: repeat(8, 1fr); }
.ruler-ipv6 .cells { grid-template-columns: repeat(16, 1fr); gap: 1px; }

.bit {
  position: relative;
  appearance: none;
  border: 0;
  margin: 0;
  padding: 0;
  height: 2.6rem;
  font: 600 1rem/1 var(--mono);
  cursor: pointer;
  border-radius: 3px;
  transition: background-color 0.15s;
}
.ruler-ipv6 .bit { height: 1.9rem; font-size: 0.7rem; border-radius: 2px; }
@media (max-width: 40rem) { .ruler-ipv6 .bit { height: 1.4rem; font-size: 0; } }
.bit.n { background: var(--net); color: var(--net-ink); }
.bit.h { background: var(--host); color: var(--host-ink); }
.bit:hover { filter: brightness(1.12); }
.bit.edge::after {
  content: '';
  position: absolute;
  right: -2px;
  top: -0.35rem;
  bottom: -0.35rem;
  width: 3px;
  background: var(--edge);
  border-radius: 2px;
  z-index: 1;
}
.ruler-ipv6 .bit.edge::after { right: -2px; width: 2px; }
.gv { text-align: center; font: 600 0.95rem/1 var(--mono); color: var(--muted); }
.ruler-ipv6 .gv { font-size: 0.85rem; }
.note { color: var(--muted); font-size: 0.9rem; margin: 0.9rem 0 0; }

.rh { font-size: 1.125rem; margin: 2rem 0 0.5rem; }

/* results */
.results { margin: 0; }
.row {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.1rem 1rem;
  padding: 0.55rem 0;
  border-top: 1px solid var(--rule);
}
@media (min-width: 40rem) { .row { grid-template-columns: 12.5rem 1fr; align-items: baseline; } }
.row dt { color: var(--muted); font-size: 0.95rem; }
.row dd { margin: 0; display: flex; align-items: baseline; gap: 0.75rem; min-width: 0; }
.row .v { font-family: var(--mono); overflow-wrap: anywhere; }
.row[data-k="type"] .v { font-family: var(--sans); }
.row[data-k="network"] .v, .row[data-k="usable"] .v, .row[data-k="address"] .v { font-weight: 600; }
.copy {
  margin-left: auto;
  flex: none;
  font: inherit;
  font-size: 0.8rem;
  color: var(--muted);
  background: none;
  border: 1px solid var(--rule);
  border-radius: 5px;
  padding: 0.1rem 0.5rem;
  cursor: pointer;
}
.copy:hover { color: var(--ink); border-color: var(--muted); }
.copy.done { color: var(--net); border-color: var(--net); }

/* split */
.splitctl { display: inline-flex; align-items: center; gap: 0.6rem; font-weight: 700; }
.splitctl select {
  font: 600 1rem var(--mono);
  color: var(--ink);
  background: var(--bg);
  border: 2px solid var(--rule);
  border-radius: 6px;
  padding: 0.3rem 0.5rem;
}
.count { color: var(--muted); margin: 0.75rem 0 0.4rem; }
.split { width: 100%; border-collapse: collapse; font-size: 0.95rem; }
.split td { padding: 0.35rem 0.5rem 0.35rem 0; border-top: 1px solid var(--rule); vertical-align: baseline; }
.split .num { color: var(--muted); width: 2.5rem; font-family: var(--mono); }
.split .v { font-family: var(--mono); font-weight: 600; }
.split .range { font-family: var(--mono); color: var(--muted); overflow-wrap: anywhere; }
@media (max-width: 40rem) { .split .range { display: none; } }

/* ---------------------------------------------------------------- content */

.more { margin-top: 3rem; }
.tiles { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: 0.75rem; }
@media (min-width: 48rem) { .tiles { grid-template-columns: repeat(3, 1fr); } }
.tiles a {
  display: block;
  height: 100%;
  padding: 1rem 1.1rem;
  border: 1px solid var(--rule);
  border-radius: 8px;
  color: var(--ink);
  text-decoration: none;
}
.tiles a:hover { border-color: var(--net); }
.tiles strong { display: block; margin-bottom: 0.25rem; }
.tiles span { color: var(--muted); font-size: 0.95rem; }

.prose { max-width: 68ch; margin-top: 3rem; }
.prose h2 { margin: 2.5rem 0 0.6rem; }
.prose h2:first-child { margin-top: 0; }
.prose h3 { margin: 1.5rem 0 0.35rem; }
.prose p { margin: 0 0 1rem; }
.note-p { margin-top: 1.75rem; }

.tablewrap { overflow-x: auto; }
.data { width: 100%; border-collapse: collapse; font-size: 0.95rem; margin: 0.5rem 0 1rem; }
.data th, .data td { text-align: left; padding: 0.45rem 0.9rem 0.45rem 0; border-bottom: 1px solid var(--rule); white-space: nowrap; }
.data td:last-child { white-space: normal; }
.data thead th { color: var(--muted); font-weight: 700; font-size: 0.875rem; }
.data tbody th { font-family: var(--mono); font-weight: 600; }
.data .r { text-align: right; }
.cidr tbody tr:hover { background: color-mix(in srgb, var(--net) 8%, transparent); }

.factsheet { display: grid; gap: 1rem 2.5rem; background: var(--surface); border: 1px solid var(--rule); border-radius: 10px; padding: 1.5rem; }
@media (min-width: 48rem) { .factsheet { grid-template-columns: auto 1fr; padding: 2rem; } }
.big { font-size: clamp(4rem, 14vw, 7rem); font-weight: 600; line-height: 0.9; color: var(--net); }
.facts { margin: 0; }
.facts div { display: grid; grid-template-columns: 1fr; padding: 0.45rem 0; border-top: 1px solid var(--rule); }
.facts div:first-child { border-top: 0; padding-top: 0; }
@media (min-width: 40rem) { .facts div { grid-template-columns: 12rem 1fr; gap: 1rem; } }
.facts dt { color: var(--muted); font-size: 0.95rem; }
.facts dd { margin: 0; overflow-wrap: anywhere; }

.actions { margin: 1.75rem 0 0; }
.button {
  display: inline-block;
  background: var(--net);
  color: var(--net-ink);
  text-decoration: none;
  font-weight: 700;
  padding: 0.7rem 1.1rem;
  border-radius: 7px;
}
.button:hover { filter: brightness(1.08); }

.pager { display: flex; justify-content: space-between; margin-top: 2.5rem; font: 600 1.1rem var(--mono); }

/* ---------------------------------------------------------------- phone codes */

.crumbs span { color: var(--muted); margin-inline: 0.3rem; }
.prose.wide { max-width: none; }
.aside { color: var(--muted); font-size: 0.925rem; }
.data td.wrap { white-space: normal; overflow-wrap: anywhere; }
.codes tbody th { width: 7rem; }
.codes tbody th.name { width: auto; font-family: var(--sans); white-space: normal; }

.filterbox { max-width: 30rem; margin-bottom: 1.25rem; }
.filterbox label { display: block; font-weight: 700; margin-bottom: 0.4rem; }
.filterbox input, .selrow select {
  width: 100%;
  font: inherit;
  color: var(--ink);
  background: var(--surface);
  border: 2px solid var(--rule);
  border-radius: 8px;
  padding: 0.55rem 0.75rem;
}
.filterbox input:focus, .selrow select:focus { outline: none; border-color: var(--net); }

.countries { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr; gap: 0 2rem; }
@media (min-width: 40rem) { .countries { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 60rem) { .countries { grid-template-columns: repeat(3, 1fr); } }
.countries a { display: flex; justify-content: space-between; gap: 1rem; padding: 0.45rem 0; border-bottom: 1px solid var(--rule); color: var(--ink); text-decoration: none; }
.countries a:hover span:first-child { color: var(--net); text-decoration: underline; }
.countries .mono { color: var(--muted); }
.empty { color: var(--muted); }

.chips { list-style: none; padding: 0; margin: 0.5rem 0 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.chips a { display: inline-block; padding: 0.3rem 0.65rem; border: 1px solid var(--rule); border-radius: 6px; color: var(--ink); text-decoration: none; font-size: 0.95rem; }
.chips a:hover { border-color: var(--net); }
.chips .mono { color: var(--muted); margin-left: 0.25rem; }

.selrow { margin-top: 1rem; max-width: 30rem; }
.selrow label { display: block; font-weight: 700; margin-bottom: 0.4rem; }
.len-ok { color: var(--ink); }
.len-short, .len-long, .len-invalid { color: var(--err); font-weight: 700; }
.row[data-k="intl"] .v { font-weight: 600; }

/* ---------------------------------------------------------------- flags */

.flag { display: inline-block; vertical-align: -3px; border-radius: 2px; box-shadow: 0 0 0 1px color-mix(in srgb, var(--ink) 14%, transparent); object-fit: cover; }
.flag-lg { vertical-align: middle; border-radius: 4px; }
h1.withflag { display: flex; align-items: center; gap: 0.9rem; }
h1.withflag .flag { flex: none; width: clamp(2.6rem, 6vw, 4rem); height: auto; }

/* ---------------------------------------------------------------- maps */

.worldmap, .minimap { position: relative; margin: 0; }
.worldmap { margin: 1.75rem 0 0.5rem; }
.worldmap svg, .minimap svg { display: block; width: 100%; height: auto; }
.minimap { background: var(--surface); border: 1px solid var(--rule); border-radius: 8px; overflow: hidden; aspect-ratio: 2 / 1; }
.minimap svg { height: 100%; }
.world .land path { fill: var(--land); stroke: var(--bg); stroke-width: calc(0.8px * var(--u, 1)); stroke-linejoin: round; transition: fill 0.12s; }
.minimap .world .land path { stroke: var(--surface); }
.world .land path.link { cursor: pointer; }
.world .land path.link:hover { fill: var(--land-hover); }
.world .land path.on, .world .land path.on:hover { fill: var(--net); }
.marker .dot { fill: var(--host); stroke: var(--surface); stroke-width: calc(2px * var(--u, 1)); }
.marker .pulse { fill: var(--host); opacity: 0.35; transform-origin: center; transform-box: fill-box; animation: pulse 2.4s ease-out 1; }
.marker .dot { r: calc(6px * var(--u, 1)); }
.marker .pulse { r: calc(16px * var(--u, 1)); }
@keyframes pulse { from { opacity: 0.6; transform: scale(0.3); } to { opacity: 0.25; transform: scale(1); } }
.maptip {
  position: absolute; pointer-events: none; transform: translate(-50%, calc(-100% - 10px));
  background: var(--ink); color: var(--bg); font-size: 0.85rem; font-weight: 700;
  padding: 0.25rem 0.55rem; border-radius: 5px; white-space: nowrap;
}

/* ---------------------------------------------------------------- home */

.hero { padding-block: 0.5rem 1.25rem; }
.hero h1 { font-size: clamp(2.1rem, 5.5vw, 3.1rem); max-width: 18ch; }
.yourip {
  max-width: 100%;
  display: inline-flex; flex-wrap: wrap; align-items: baseline; gap: 0.25rem 0.9rem; margin-top: 1.25rem;
  padding: 0.75rem 1.1rem; border-radius: 10px; background: var(--surface); border: 1px solid var(--rule);
  color: var(--ink); text-decoration: none;
}
.yourip:hover { border-color: var(--net); }
.yourip .yl { color: var(--muted); font-size: 0.9rem; }
.yourip .yv { font-size: 1.35rem; font-weight: 600; color: var(--net); overflow-wrap: anywhere; }
.yourip .yw { color: var(--muted); display: inline-flex; gap: 0.45rem; align-items: center; }

.cards { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; margin-top: 1.5rem; }
@media (min-width: 46rem) { .cards { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 64rem) {
  .cards { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .cards > .card:first-child { grid-column: span 2; }
}
.card { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--rule); border-radius: 12px; padding: 1.25rem 1.25rem 1.35rem; border-top: 4px solid var(--tone); }
.tone-net { --tone: var(--net); --tone-soft: var(--net-soft); }
.tone-host { --tone: var(--host); --tone-soft: var(--host-soft); }
.cardhead { display: flex; align-items: center; gap: 0.7rem; }
.cardhead h2 { font-size: 1.25rem; }
.cardhead h2 a { color: var(--ink); text-decoration: none; }
.cardhead h2 a:hover { text-decoration: underline; }
.icon { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: 9px; background: var(--tone-soft); flex: none; }
.icon svg { width: 1.35rem; height: 1.35rem; fill: none; stroke: var(--tone); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tone-host .icon svg { stroke: color-mix(in srgb, var(--host) 70%, var(--ink)); }
.card p { color: var(--muted); margin: 0.6rem 0 0.9rem; }
.quick { display: flex; gap: 0.5rem; margin-top: auto; }
.card p.quick { margin: auto 0 0; }
.quick input {
  flex: 1; min-width: 0; font: 600 1rem var(--mono); color: var(--ink); background: var(--bg);
  border: 2px solid var(--rule); border-radius: 8px; padding: 0.55rem 0.7rem;
}
.quick input:focus { outline: none; border-color: var(--tone); }
.quick button, .inputrow button {
  flex: none; font: 700 0.95rem var(--sans); color: var(--net-ink); background: var(--net);
  border: 0; border-radius: 8px; padding: 0 1rem; cursor: pointer;
}
.tone-host .quick button { background: var(--host); color: var(--host-ink); }
.quick button:hover, .inputrow button:hover { filter: brightness(1.08); }
.mapband { margin-top: 3rem; }
.mapband .aside { margin: 0.35rem 0 0; }

/* ---------------------------------------------------------------- search */

.searchbox { position: relative; max-width: 40rem; margin-bottom: 0.5rem; }
.searchbox label { display: block; font-weight: 700; margin-bottom: 0.4rem; }
.searchbox input {
  width: 100%; font: inherit; font-size: 1.15rem; color: var(--ink); background: var(--surface);
  border: 2px solid var(--rule); border-radius: 10px; padding: 0.7rem 0.9rem;
}
.searchbox input:focus { outline: none; border-color: var(--net); }
.hits { list-style: none; margin: 0.5rem 0 0; padding: 0; max-height: 26rem; overflow-y: auto; border-radius: 10px; }
.hits:not(:empty) { background: var(--surface); border: 1px solid var(--rule); }
.hits a {
  display: grid; grid-template-columns: auto 1fr auto; grid-template-areas: 'f l b' 'f s b'; column-gap: 0.75rem; align-items: center;
  padding: 0.55rem 0.8rem; color: var(--ink); text-decoration: none; border-top: 1px solid var(--rule);
}
.hits li:first-child a { border-top: 0; }
.hits a:hover, .hits a.act { background: var(--net-soft); }
.hits .flag { grid-area: f; }
.hits .hl { grid-area: l; font-weight: 700; }
.hits .hs { grid-area: s; color: var(--muted); font-size: 0.9rem; }
.badge { grid-area: b; font-size: 0.75rem; font-weight: 700; padding: 0.15rem 0.5rem; border-radius: 99px; background: var(--bg); color: var(--muted); }
.b-c { background: var(--net-soft); color: var(--net); }
.b-o { background: var(--host-soft); color: color-mix(in srgb, var(--host) 55%, var(--ink)); }
.hitstatus { color: var(--muted); font-size: 0.9rem; margin: 0.4rem 0 0; min-height: 1.2em; }

/* ---------------------------------------------------------------- country lists */

.continent { margin-top: 2.25rem; }
.continent h2 { display: flex; align-items: baseline; gap: 0.5rem; margin-bottom: 0.4rem; }
.continent .count { color: var(--muted); font-size: 0.95rem; font-weight: 400; }
.countries a { align-items: center; }
.countries .cn { flex: 1; }
.countries a .flag { flex: none; }
.chips .flag { margin-right: 0.4rem; }

/* factsheet with a lead column (code + map) */
.factsheet .lead { display: flex; flex-direction: column; gap: 1rem; min-width: 0; }
@media (min-width: 48rem) { .factsheet { grid-template-columns: minmax(14rem, 22rem) 1fr; } }

/* ---------------------------------------------------------------- IP pages */

.split2 { display: grid; gap: 1.5rem; align-items: start; }
@media (min-width: 52rem) { .split2 { grid-template-columns: 1fr minmax(16rem, 24rem); } }
.myipbox .kicker { margin: 0; color: var(--muted); font-weight: 700; display: flex; gap: 0.6rem; align-items: center; }
.myipbox .badge:empty { display: none; }
.myip { font-size: clamp(1.8rem, 6vw, 3.4rem); color: var(--net); margin: 0.35rem 0 0.5rem; overflow-wrap: anywhere; line-height: 1.1; }
.actions-inline { display: flex; gap: 1rem; align-items: center; margin: 0 0 1.25rem; }
.actions-inline .copy { margin: 0; font-size: 0.9rem; padding: 0.3rem 0.8rem; }
.ua { font-size: 0.85rem; color: var(--muted); overflow-wrap: anywhere; }
.inputrow { display: flex; gap: 0.5rem; }
.inputrow input { flex: 1; min-width: 0; }
.row dd .aside { margin-left: 0.25rem; }
.row dd > a.mono { font-weight: 600; }
.ipres .row dd { display: block; }
.tag { display: inline-block; font-size: 0.8rem; font-weight: 700; padding: 0.1rem 0.5rem; border-radius: 99px; background: var(--net-soft); color: var(--net); margin: 0.1rem 0.15rem 0.1rem 0; vertical-align: 1px; }
.tag.warn { background: var(--host-soft); color: color-mix(in srgb, var(--host) 55%, var(--ink)); }
.tag.ok { background: color-mix(in srgb, #2E9D5B 14%, transparent); color: color-mix(in srgb, #2E9D5B 75%, var(--ink)); }
.ipres .row dd .copy { float: right; margin-left: 0.75rem; }
.ipres .row dd .flag { margin-right: 0.35rem; }
[data-iplookup] .split2 > figure { margin-top: 2.6rem; }
.myipbox .split2 > figure { margin-top: 0.25rem; }

/* ---------------------------------------------------------------- AS pages */

.big.asbig { font-size: clamp(2.4rem, 7vw, 3.4rem); overflow-wrap: anywhere; }
h1 .sub { display: block; font-size: 0.55em; font-weight: 700; color: var(--muted); margin-top: 0.3rem; letter-spacing: 0; }
.ccshare { display: inline-flex; align-items: center; gap: 0.3rem; margin: 0 0.9rem 0.3rem 0; white-space: nowrap; }
.netgrid { list-style: none; margin: 0.4rem 0 0; padding: 0; display: grid; gap: 0.15rem 1.25rem; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); font-size: 0.9rem; }
.netgrid.v6 { grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); }
.netgrid li { padding: 0.2rem 0; border-bottom: 1px solid var(--rule); overflow-wrap: anywhere; }
.morenets { margin-top: 0.6rem; }
.morenets summary { cursor: pointer; color: var(--net); font-weight: 700; }
.prose h2 .count { color: var(--muted); font-size: 0.95rem; font-weight: 400; margin-left: 0.3rem; }
.export { margin-top: 2.5rem; }
.rh.first { margin-top: 0; }
.exportctl { display: flex; flex-wrap: wrap; gap: 0.75rem 1.5rem; align-items: center; margin: 0.9rem 0; }
.exportctl select { font: inherit; color: var(--ink); background: var(--bg); border: 2px solid var(--rule); border-radius: 6px; padding: 0.3rem 0.5rem; margin-left: 0.4rem; }
.exportctl input { accent-color: var(--net); }
.export textarea { width: 100%; font: 0.85rem/1.5 var(--mono); color: var(--ink); background: var(--bg); border: 1px solid var(--rule); border-radius: 8px; padding: 0.7rem; resize: vertical; }
.button { border: 0; cursor: pointer; font: inherit; font-weight: 700; }
.button.ghost, .ghostbtn { background: transparent; color: var(--net); box-shadow: inset 0 0 0 2px var(--net); }
.inputrow .ghostbtn { background: transparent; color: var(--net); }

/* ---------------------------------------------------------------- DNS / WHOIS */

.tag.bad { background: color-mix(in srgb, var(--err) 14%, transparent); color: var(--err); }
.dnshead { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.5rem 1rem; margin-top: 1.5rem; }
.dnshead h2 { overflow-wrap: anywhere; }
.rr { margin-top: 1.4rem; }
.rr h3 { display: flex; align-items: baseline; gap: 0.6rem; color: var(--muted); font-weight: 400; font-size: 0.95rem; }
.rtype { font: 700 1rem var(--mono); color: var(--ink); background: var(--net-soft); padding: 0.05rem 0.45rem; border-radius: 5px; }
.rr .data td:first-child { white-space: normal; }
.wrapall { overflow-wrap: anywhere; word-break: break-word; }
.checks { display: grid; gap: 0.75rem; margin-top: 0.5rem; }
@media (min-width: 48rem) { .checks { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.check { border: 1px solid var(--rule); border-radius: 8px; padding: 0.8rem 1rem; }
.check .ch { display: flex; align-items: center; gap: 0.6rem; }
.check p { margin: 0.45rem 0 0; }
.check .rec { font-size: 0.85rem; background: var(--bg); padding: 0.4rem 0.55rem; border-radius: 6px; }

/* ---------------------------------------------------------------- ping */

.pingrow { display: grid; gap: 0.9rem; grid-template-columns: minmax(0, 1fr); margin-bottom: 1rem; }
@media (min-width: 46rem) { .pingrow { grid-template-columns: minmax(0, 1fr) auto auto; } }
.pingform label { display: block; font-weight: 700; margin-bottom: 0.4rem; }
.pingform select, .pingform input[name=from] {
  font: inherit; color: var(--ink); background: var(--bg); border: 2px solid var(--rule); border-radius: 8px; padding: 0.55rem 0.7rem;
}
.pingform input[name=from] { width: 100%; max-width: 30rem; }
.pingform select:focus, .pingform input:focus { outline: none; border-color: var(--net); }
.presets { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.6rem 0 1rem; }
.chipbtn { font: inherit; font-size: 0.9rem; color: var(--ink); background: var(--bg); border: 1px solid var(--rule); border-radius: 99px; padding: 0.25rem 0.75rem; cursor: pointer; }
.chipbtn:hover { border-color: var(--net); }
.chipbtn.on { background: var(--net); color: var(--net-ink); border-color: var(--net); }
.button:disabled { opacity: 0.55; cursor: progress; }
.probes { display: grid; gap: 0.75rem; margin-top: 1rem; }
@media (min-width: 48rem) { .probes:has(.probe.ping) { grid-template-columns: repeat(auto-fill, minmax(17rem, 1fr)); } }
.probe { border: 1px solid var(--rule); border-radius: 10px; padding: 0.85rem 1rem; min-width: 0; }
.probe header { display: flex; flex-direction: column; gap: 0.15rem; }
.probe .pl { display: flex; align-items: center; gap: 0.45rem; font-weight: 700; }
.probe header .aside { font-size: 0.8rem; overflow-wrap: anywhere; }
.pbig { font: 600 1.8rem/1.1 var(--mono); margin: 0.5rem 0 0.2rem; }
.fast { color: #2E9D5B; }
.mid { color: color-mix(in srgb, var(--host) 75%, var(--ink)); }
.slow { color: var(--err); }
.hops { font-size: 0.9rem; }
.hops td { white-space: normal; vertical-align: top; }
.hops .num { color: var(--muted); width: 2rem; }
.probe details { margin-top: 0.5rem; }
.probe summary { cursor: pointer; color: var(--muted); font-size: 0.85rem; }
.probe pre { font: 0.78rem/1.4 var(--mono); background: var(--bg); padding: 0.6rem; border-radius: 6px; overflow-x: auto; }
.probesmap { margin-top: 1.25rem; }
.marker.fast .dot { fill: #2E9D5B; }
.marker.mid .dot { fill: var(--host); }
.marker.slow .dot { fill: var(--err); }

/* ---------------------------------------------------------------- VoIP analyzer */

.cardbtn { display: inline-block; text-decoration: none; padding: 0.55rem 1rem; border-radius: 8px; background: var(--host); color: var(--host-ink); }
.tone-net .cardbtn { background: var(--net); color: var(--net-ink); }
.dropzone {
  display: flex; flex-direction: column; align-items: center; gap: 0.4rem; text-align: center; cursor: pointer;
  padding: 2.2rem 1rem; border: 2px dashed var(--rule); border-radius: 12px; background: var(--bg); transition: border-color 0.15s, background 0.15s;
}
.dropzone:hover, .dropzone.over { border-color: var(--net); background: var(--net-soft); }
.dropzone:focus-within { outline: 3px solid var(--net); outline-offset: 2px; }
.dz-icon svg { width: 2.6rem; height: 2.6rem; fill: none; stroke: var(--net); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.dropzone strong { font-size: 1.15rem; }
.progress { width: 100%; height: 0.5rem; accent-color: var(--net); margin-top: 0.5rem; }
.vstatus.err { color: var(--err); font-weight: 700; }
.vsummary { display: grid; grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); gap: 0.6rem; margin-top: 1.25rem; }
.vsummary > div { background: var(--bg); border-radius: 8px; padding: 0.55rem 0.75rem; min-width: 0; }
.vsummary .k { display: block; color: var(--muted); font-size: 0.8rem; }
.vsummary .v { font: 600 1.05rem var(--mono); overflow-wrap: anywhere; }
.vnote { background: var(--host-soft); border-radius: 8px; padding: 0.6rem 0.8rem; }
.calllist td { white-space: normal; }
.calllist td.nowrap { white-space: nowrap; }
.calllist .probs { color: var(--muted); font-size: 0.9rem; }
.tag.info { background: var(--bg); color: var(--muted); }
.callcard { border: 1px solid var(--rule); border-left: 5px solid #2E9D5B; border-radius: 10px; padding: 1rem 1.1rem; margin-top: 1.5rem; scroll-margin-top: 1rem; }
.callcard.warn { border-left-color: var(--host); }
.callcard.bad { border-left-color: var(--err); }
.callcard header { display: flex; flex-wrap: wrap; align-items: center; gap: 0.4rem 0.8rem; }
.callcard h3 { font-size: 1.2rem; }
.callcard h4 { margin: 1.4rem 0 0.4rem; font-size: 1.05rem; }
.story { margin: 0.6rem 0 0.8rem; max-width: 75ch; }
.timeline { position: relative; height: 0.9rem; background: var(--bg); border-radius: 99px; overflow: hidden; }
.timeline .seg { position: absolute; top: 0; bottom: 0; }
.seg.setup, .tlegend .setup::before { background: var(--rule); }
.seg.ring, .tlegend .ring::before { background: var(--host); }
.seg.talk, .tlegend .talk::before { background: #2E9D5B; }
.tlegend { display: flex; flex-wrap: wrap; gap: 1rem; font-size: 0.82rem; color: var(--muted); margin: 0.35rem 0 0.9rem; }
.tlegend span::before { content: ''; display: inline-block; width: 0.7rem; height: 0.7rem; border-radius: 3px; margin-right: 0.35rem; vertical-align: -1px; }
.cfacts { display: grid; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); gap: 0.4rem 1.25rem; margin: 0; }
.cfacts dt { color: var(--muted); font-size: 0.82rem; }
.cfacts dd { margin: 0; overflow-wrap: anywhere; }
.issues { list-style: none; padding: 0; margin: 1rem 0 0; display: grid; gap: 0.5rem; }
.issue { border-radius: 8px; padding: 0.6rem 0.8rem; background: var(--bg); border-left: 4px solid var(--muted); }
.issue.bad { border-left-color: var(--err); background: color-mix(in srgb, var(--err) 7%, var(--surface)); }
.issue.warn { border-left-color: var(--host); background: color-mix(in srgb, var(--host) 9%, var(--surface)); }
.issue.ok { border-left-color: #2E9D5B; }
.issue p { margin: 0.25rem 0 0; }
.issue .advice { font-size: 0.93rem; }
.ladderbox { margin-top: 1.1rem; }
.ladderbox summary { cursor: pointer; font-weight: 700; }
.ladderwrap { overflow-x: auto; margin-top: 0.5rem; background: var(--bg); border-radius: 8px; padding: 0.4rem; }
.ladder { display: block; max-width: none; height: auto; font-family: var(--sans); }
.ladder .lane { stroke: var(--rule); stroke-width: 2; }
.ladder .lh { font-size: 13px; font-weight: 700; fill: var(--ink); }
.ladder .la { font: 11px var(--mono); fill: var(--muted); }
.ladder .lt { font: 11px var(--mono); fill: var(--muted); }
.ladder .ll { font-size: 12px; fill: var(--ink); }
.ladder .arr { stroke-width: 1.6; stroke: var(--net); }
.ladder .head { fill: var(--net); }
.ladder .arr.prov { stroke: var(--muted); } .ladder .head.prov { fill: var(--muted); }
.ladder .arr.ok { stroke: #2E9D5B; } .ladder .head.ok { fill: #2E9D5B; }
.ladder .arr.err { stroke: var(--err); } .ladder .head.err { fill: var(--err); } .ladder .ll.err { fill: var(--err); }
.ladder .arr.rtp { stroke: var(--host); stroke-width: 5; opacity: 0.55; } .ladder .head.rtp { fill: var(--host); }
.ladder .arr.re { stroke-dasharray: 4 3; }
.stream { margin-top: 0.9rem; }
.stream .sh { margin: 0 0 0.4rem; overflow-wrap: anywhere; }
.chips2 { display: flex; flex-wrap: wrap; gap: 0.4rem; }
.chip2 { background: var(--bg); border-radius: 8px; padding: 0.3rem 0.6rem; display: flex; flex-direction: column; min-width: 6.5rem; }
.chip2 .k { font-size: 0.75rem; color: var(--muted); }
.chip2 .v { font: 600 0.95rem var(--mono); }
.chip2.ok .v { color: #2E9D5B; } .chip2.warn .v { color: color-mix(in srgb, var(--host) 70%, var(--ink)); } .chip2.bad .v { color: var(--err); }
.rtpchart { margin: 0.6rem 0 0; }
.rtpchart svg { width: 100%; height: auto; display: block; }
.rtpchart .g { stroke: var(--rule); stroke-width: 1; }
.rtpchart .ax { font: 10px var(--mono); fill: var(--muted); }
.rtpchart .jit { fill: none; stroke: var(--net); stroke-width: 1.6; }
.rtpchart .delta { fill: none; stroke: var(--host); stroke-width: 1; opacity: 0.8; }
.rtpchart .lossmark { stroke: var(--err); stroke-width: 2; }
.rtpchart figcaption { display: flex; flex-wrap: wrap; gap: 1rem; font-size: 0.82rem; color: var(--muted); }
.lg::before { content: ''; display: inline-block; width: 0.9rem; height: 3px; margin-right: 0.35rem; vertical-align: 3px; }
.lg.jit::before { background: var(--net); } .lg.delta::before { background: var(--host); } .lg.loss::before { background: var(--err); width: 3px; height: 0.8rem; vertical-align: -1px; }
.cmd { font: 0.88rem/1.5 var(--mono); background: var(--surface); border: 1px solid var(--rule); border-radius: 8px; padding: 0.7rem 0.9rem; overflow-x: auto; white-space: pre; }

/* ---------------------------------------------------------------- is it down */

.verdict { border-radius: 10px; padding: 0.9rem 1.1rem; margin-top: 1rem; border-left: 5px solid var(--muted); background: var(--bg); }
.verdict.ok { border-left-color: #2E9D5B; background: color-mix(in srgb, #2E9D5B 9%, var(--surface)); }
.verdict.warn { border-left-color: var(--host); background: color-mix(in srgb, var(--host) 11%, var(--surface)); }
.verdict.bad { border-left-color: var(--err); background: color-mix(in srgb, var(--err) 8%, var(--surface)); }
.verdict .vt { font-size: 1.35rem; font-weight: 700; margin: 0; overflow-wrap: anywhere; }
.verdict p { margin: 0.35rem 0 0; max-width: 75ch; }
.ccchips { display: flex; flex-wrap: wrap; gap: 0.45rem; margin: 0.9rem 0 0.6rem; }
.ccchip { display: inline-flex; align-items: center; gap: 0.4rem; padding: 0.3rem 0.7rem; border-radius: 99px; background: var(--bg); border: 1px solid var(--rule); font-size: 0.92rem; }
.ccchip.up { border-color: #2E9D5B; } .ccchip.up strong { color: #2E9D5B; }
.ccchip.down { border-color: var(--err); } .ccchip.down strong { color: var(--err); }
.ccchip.partial, .ccchip.errors { border-color: var(--host); } .ccchip.partial strong, .ccchip.errors strong { color: color-mix(in srgb, var(--host) 70%, var(--ink)); }
.downtable td { white-space: normal; vertical-align: top; }
.downtable tr.down td:first-child { box-shadow: inset 3px 0 0 var(--err); padding-left: 0.5rem; }
.kinds { margin: 0.6rem 0 0; padding-left: 1.2rem; color: var(--muted); font-size: 0.92rem; }
.kinds li { margin: 0.2rem 0; }
.avatar {
  display: inline-grid; place-items: center; flex: none; width: 2rem; height: 2rem; border-radius: 8px;
  background: hsl(var(--h) 55% 45%); color: #fff; font-weight: 700; font-size: 1rem;
}
h1.withavatar { display: flex; align-items: center; gap: 0.8rem; }
h1.withavatar .avatar { width: 3rem; height: 3rem; font-size: 1.5rem; border-radius: 12px; }
.svcwrap { margin-top: 2.5rem; }
.svcgroup h3 { margin: 1.4rem 0 0.5rem; }
.svcs { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.5rem; grid-template-columns: repeat(auto-fill, minmax(12.5rem, 1fr)); }
.svcs a { display: flex; align-items: center; gap: 0.6rem; padding: 0.45rem 0.6rem; border: 1px solid var(--rule); border-radius: 8px; color: var(--ink); text-decoration: none; background: var(--surface); }
.svcs a:hover { border-color: var(--net); }

/* ---------------------------------------------------------------- SIP / Q.850 reference */

.codegroup { margin-top: 2rem; }
.codegroup h2 { margin-bottom: 0.2rem; }
.codelist { list-style: none; padding: 0; margin: 0.6rem 0 0; display: grid; gap: 0.4rem; }
.codelist a { display: grid; grid-template-columns: 3.6rem minmax(0, 14rem) minmax(0, 1fr); gap: 0.2rem 0.9rem; align-items: baseline; padding: 0.5rem 0.7rem; border: 1px solid var(--rule); border-radius: 8px; color: var(--ink); text-decoration: none; background: var(--surface); }
.codelist a:hover { border-color: var(--net); }
.codelist .cn { font-weight: 700; }
.codelist .cd { color: var(--muted); font-size: 0.92rem; }
@media (max-width: 40rem) { .codelist a { grid-template-columns: 3.6rem minmax(0, 1fr); } .codelist .cd { grid-column: 2; } }
.cc { font: 700 1.05rem var(--mono); }
.c1, .codebig.c1 { color: var(--muted); } .c2, .codebig.c2 { color: #2E9D5B; } .c3, .codebig.c3 { color: var(--net); }
.c4, .codebig.c4 { color: color-mix(in srgb, var(--host) 75%, var(--ink)); } .c5, .codebig.c5, .c6, .codebig.c6 { color: var(--err); }
.codebig.q { color: var(--net); }
.qtable td, .qtable th { white-space: normal; }
.cta { margin-top: 2.5rem; padding: 1.1rem 1.25rem; border-radius: 12px; background: var(--host-soft); border: 1px solid color-mix(in srgb, var(--host) 40%, var(--rule)); max-width: 68ch; }
.cta p { margin: 0 0 0.6rem; }
.cta p:last-child { margin: 0; }
.cta .button { background: var(--host); color: var(--host-ink); }

/* ---------------------------------------------------------------- ads, offers, notice */

.adslot { display: block; margin: 2rem 0; min-height: 280px; padding-top: 0.2rem; text-align: center; overflow: hidden; }
@media (min-width: 48rem) { .adslot { min-height: 250px; } }
.adlabel { display: block; font-size: 0.72rem; color: var(--muted); margin-bottom: 0.3rem; text-align: left; }
.offer { margin: 2rem 0; padding: 1.1rem 1.25rem; border-radius: 12px; border: 1px solid var(--rule); background: var(--surface); max-width: 68ch; }
.offer .ot { font-weight: 700; font-size: 1.1rem; margin: 0 0 0.3rem; }
.offer p { margin: 0 0 0.7rem; }
.offer p:last-child { margin: 0; }
/* `hidden` must win over display rules like the one below */
[hidden] { display: none !important; }

.cookienote {
  position: fixed; left: 1rem; right: 1rem; bottom: 1rem; z-index: 50; max-width: 34rem; margin: 0 auto;
  display: flex; align-items: center; gap: 1rem; padding: 0.75rem 1rem; border-radius: 10px;
  background: var(--ink); color: var(--bg); box-shadow: 0 6px 24px rgb(0 0 0 / 0.25); font-size: 0.92rem;
}
.cookienote p { margin: 0; flex: 1; }
.cookienote a { color: inherit; }
.cookienote button { flex: none; font: inherit; font-weight: 700; border: 0; border-radius: 7px; padding: 0.4rem 0.9rem; background: var(--bg); color: var(--ink); cursor: pointer; }

/* ---------------------------------------------------------------- footer */

footer.site { border-top: 1px solid var(--rule); color: var(--muted); font-size: 0.925rem; padding-block: 1.5rem 2.5rem; }
footer.site p { margin: 0 0 0.4rem; max-width: 68ch; }
footer .fine { font-size: 0.85rem; }

@media (prefers-reduced-motion: reduce) {
  .bit, .body { transition: none; }
}

/* ---------------------------------------------------------------- speed test */

.sp-tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.6rem; }
@media (min-width: 40rem) { .sp-tiles { grid-template-columns: 1.4fr 1.4fr 1fr 1fr 1fr; } }
.sp-tile { background: var(--bg); border-radius: 10px; padding: 0.7rem 0.9rem; border: 2px solid transparent; transition: border-color 0.2s; min-width: 0; }
.sp-tile.on { border-color: var(--net); }
.sp-up.on { border-color: var(--host); }
.sp-l { display: block; color: var(--muted); font-size: 0.85rem; font-weight: 700; }
.sp-v { font: 600 clamp(1.5rem, 4.5vw, 2.1rem) / 1.15 var(--mono); font-variant-numeric: tabular-nums; }
.sp-down .sp-v, .sp-up .sp-v { font-size: clamp(1.9rem, 6vw, 2.9rem); }
.sp-down .sp-v { color: var(--net); }
.sp-up .sp-v { color: color-mix(in srgb, var(--host) 70%, var(--ink)); }
.sp-u { margin-left: 0.3rem; color: var(--muted); font-size: 0.9rem; }
.sp-chart { display: block; width: 100%; height: 7rem; margin: 1rem 0 0.5rem; background: var(--bg); border-radius: 8px; }
.sp-chart polyline { fill: none; stroke-width: 2.5; stroke-linejoin: round; vector-effect: non-scaling-stroke; }
.sp-line-down { stroke: var(--net); }
.sp-line-up { stroke: var(--host); }
.sp-grid { stroke: var(--rule); vector-effect: non-scaling-stroke; }
.sp-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 1rem; margin-top: 0.75rem; }
.sp-go { min-width: 11rem; font-size: 1.1rem; padding-block: 0.7rem; }
.running .sp-go { background: var(--surface); color: var(--net); box-shadow: inset 0 0 0 2px var(--net); }
.sp-meta { margin: 0.6rem 0 0; }
.sp-meta:empty { display: none; }
.sp-sum { font-size: 1.2rem; font-weight: 700; margin: 1.25rem 0 0; }

/* ---------------------------------------------------------------- DNS propagation, blacklists, WebRTC */

.toprop, .tobl { margin-left: 1rem; }
.propsum { margin: 1.25rem 0 0.5rem; }
.propsum .pbig { margin: 0; }
.proptable .pl { display: inline-flex; align-items: center; gap: 0.45rem; font-weight: 700; margin-right: 0.5rem; }
.proptable td { vertical-align: top; }
.pstate { font-weight: 700; font-size: 1.1rem; }

.blsec { margin-top: 1.75rem; }
.blsum .pbig { margin: 0.5rem 0 0.25rem; }
.blptr { margin: 0.5rem 0 0; }
.bllists { display: grid; gap: 0.4rem; margin-top: 0.75rem; }
@media (min-width: 48rem) { .bllists { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.bl { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.25rem 0.75rem; padding: 0.5rem 0.75rem; border-radius: 8px; background: var(--bg); border-left: 4px solid var(--rule); font-size: 0.95rem; min-width: 0; }
.bl.listed { border-left-color: var(--err); background: color-mix(in srgb, var(--err) 7%, var(--surface)); }
.bl.clean { border-left-color: #2E9D5B; }
.bl.unavailable, .bl.error { opacity: 0.75; }
.bln { font-weight: 700; }
.bls { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 0.4rem; font-size: 0.9rem; }
.blr { flex-basis: 100%; margin: 0; font-size: 0.85rem; overflow-wrap: anywhere; }

.webrtc { margin-top: 1.5rem; }
.rtchead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; }
.rtchead .ghostbtn { font: 700 0.9rem var(--sans); border: 0; border-radius: 8px; padding: 0.45rem 0.9rem; cursor: pointer; }
.webrtc > .aside { margin: 0.5rem 0 0.75rem; }
.rtclist { list-style: none; padding: 0; margin: 0.75rem 0 0; display: grid; gap: 0.35rem; }

/* ---------------------------------------------------------------- brighter look (Oct 2026) */

:root {
  --bg: #F5F7FB;
  --rule: #DCE2EB;
  --net: #2457D6;
  --net-soft: #E7EEFD;
  --shadow: 0 1px 2px rgb(16 24 40 / 0.04), 0 6px 20px rgb(16 24 40 / 0.06);
  --shadow-up: 0 2px 4px rgb(16 24 40 / 0.06), 0 12px 32px rgb(16 24 40 / 0.10);
  --glow-a: rgb(36 87 214 / 0.13);
  --glow-b: rgb(240 168 30 / 0.16);
  --glow-c: rgb(14 159 142 / 0.10);
  --header-bg: rgb(255 255 255 / 0.78);
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0F151E;
    --rule: #2A3646;
    --net: #7AA2FF;
    --net-soft: #1C2A45;
    --shadow: 0 1px 2px rgb(0 0 0 / 0.3), 0 6px 20px rgb(0 0 0 / 0.25);
    --shadow-up: 0 2px 4px rgb(0 0 0 / 0.35), 0 12px 32px rgb(0 0 0 / 0.35);
    --glow-a: rgb(122 162 255 / 0.14);
    --glow-b: rgb(240 180 60 / 0.10);
    --glow-c: rgb(45 212 191 / 0.08);
    --header-bg: rgb(15 21 30 / 0.78);
  }
}

body {
  background:
    radial-gradient(60rem 28rem at 8% -6rem, var(--glow-a), transparent 70%),
    radial-gradient(46rem 24rem at 96% -4rem, var(--glow-b), transparent 70%),
    radial-gradient(40rem 22rem at 55% 6rem, var(--glow-c), transparent 70%),
    var(--bg);
  background-repeat: no-repeat;
}

header.site {
  position: sticky; top: 0; z-index: 40;
  background: var(--header-bg);
  -webkit-backdrop-filter: saturate(1.6) blur(12px); backdrop-filter: saturate(1.6) blur(12px);
  border-bottom-color: color-mix(in srgb, var(--rule) 70%, transparent);
}
header nav a { border-radius: 0; }
header nav a:hover { color: var(--net); }

.tool, .factsheet, .card, .yourip, .tiles a { border-color: color-mix(in srgb, var(--rule) 80%, transparent); box-shadow: var(--shadow); }
.tool { border-radius: 14px; }
.card, .tiles a { transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease; }
.card:hover, .tiles a:hover { transform: translateY(-2px); box-shadow: var(--shadow-up); }
.tiles a { background: var(--surface); border-radius: 12px; border-left: 4px solid var(--net-soft); }
.tiles a:hover { border-left-color: var(--net); }
.tiles strong { color: var(--ink); }

.button, .quick button, .inputrow button, .cardbtn { border-radius: 9px; box-shadow: 0 1px 2px rgb(16 24 40 / 0.12); }
.hero h1 { background: linear-gradient(100deg, var(--ink) 30%, color-mix(in srgb, var(--net) 85%, var(--ink)) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }

/* one accent per tool on the home page */
.tone-green  { --tone: #1F9D5A; --tone-ink: #FFFFFF; }
.tone-violet { --tone: #7B4FE0; --tone-ink: #FFFFFF; }
.tone-teal   { --tone: #0B9488; --tone-ink: #FFFFFF; }
.tone-orange { --tone: #E8590C; --tone-ink: #FFFFFF; }
.tone-rose   { --tone: #D6336C; --tone-ink: #FFFFFF; }
.tone-net    { --tone-ink: var(--net-ink); }
.tone-host   { --tone-ink: var(--host-ink); }
@media (prefers-color-scheme: dark) {
  .tone-green  { --tone: #4ADE80; --tone-ink: #062012; }
  .tone-violet { --tone: #A78BFA; --tone-ink: #150B2E; }
  .tone-teal   { --tone: #2DD4BF; --tone-ink: #04201D; }
  .tone-orange { --tone: #FB923C; --tone-ink: #2A1203; }
  .tone-rose   { --tone: #F472B6; --tone-ink: #2A0716; }
}
.tone-green, .tone-violet, .tone-teal, .tone-orange, .tone-rose { --tone-soft: color-mix(in srgb, var(--tone) 14%, var(--surface)); }
.card .quick button, .card .cardbtn { background: var(--tone); color: var(--tone-ink); }
.card .quick input:focus { border-color: var(--tone); }
.card .icon svg { stroke: var(--tone); }
.tone-host .icon svg { stroke: color-mix(in srgb, var(--host) 70%, var(--ink)); }

footer.site { background: color-mix(in srgb, var(--surface) 60%, transparent); }
.card { border-top: 4px solid var(--tone); }
.quickcheck { margin-top: 0.5rem; }
.quickcheck label { display: block; font-weight: 700; margin-bottom: 0.4rem; }
.callout { background: var(--net-soft); border-radius: 12px; padding: 1.25rem 1.5rem; }
.callout h2 { margin-top: 0; }

/* ---------------------------------------------------------------- telephony calculators */

.cgrid { display: grid; gap: 0.9rem 1rem; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); }
.cf label { display: block; font-weight: 700; font-size: 0.92rem; margin-bottom: 0.35rem; }
.cf select, .cf input, .vlanrow input:not([type=checkbox]) { width: 100%; font: 600 1rem var(--sans); color: var(--ink); background: var(--bg); border: 2px solid var(--rule); border-radius: 8px; padding: 0.5rem 0.65rem; }
.cf input, .vlanrow input { font-family: var(--mono); }
.cf select:focus, .cf input:focus, .vlanrow input:focus { outline: none; border-color: var(--net); }
.checks-inline { display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; margin: 1rem 0 0; }
.checks-inline label { display: inline-flex; align-items: center; gap: 0.4rem; cursor: pointer; }
.bwtiles { margin-top: 1.5rem; grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr)) !important; }
.bwtiles .sp-v { font-size: clamp(1.4rem, 3.5vw, 1.9rem); }
.pktbar { display: flex; height: 2.2rem; border-radius: 8px; overflow: hidden; margin: 0.6rem 0; }
.pktbar .seg { display: grid; place-items: center; min-width: 3px; font: 600 0.8rem var(--mono); color: #fff; }
.seg-payload { background: #1F9D5A; }
.seg-rtp { background: var(--net); }
.seg-srtp { background: #7B4FE0; }
.seg-udp { background: #0B9488; }
.seg-ip { background: #E8590C; }
.seg-tunnel { background: #D6336C; }
.seg-l2 { background: #64748B; }
.pktlegend { list-style: none; padding: 0; margin: 0 0 0.5rem; display: flex; flex-wrap: wrap; gap: 0.35rem 1.1rem; font-size: 0.9rem; }
.pktlegend i { display: inline-block; width: 0.8rem; height: 0.8rem; border-radius: 3px; margin-right: 0.35rem; vertical-align: -1px; }
.data tr.hl td { background: var(--net-soft); font-weight: 700; }
.facts-inline { list-style: none; padding: 0; margin: 1rem 0 0; display: flex; flex-wrap: wrap; gap: 0.5rem 1.5rem; }
[data-erlang] > h2 { margin-bottom: 0.25rem; }
[data-erlang] .calcform { margin-top: 1rem; }
.entry label.mt { margin-top: 1rem; }
.presets .chipbtn .aside { font-size: 0.8rem; }
.portres td { vertical-align: middle; }
.sipout .issue + .issue, .sipout .issue + p { margin-top: 0.5rem; }
.sipout table.data th { font-family: var(--mono); font-size: 0.85rem; color: var(--muted); }
.pingrow input[type="number"] { width: 100%; font: 600 1rem var(--mono); color: var(--ink); background: var(--bg); border: 2px solid var(--rule); border-radius: 8px; padding: 0.55rem 0.65rem; }
.pingrow input[type="number"]:focus { outline: none; border-color: var(--net); }

/* ---------------------------------------------------------------- MOS gauge, SIP message analyzer */

.mosgauge { margin-top: 1.5rem; padding: 1rem 1.25rem; border-radius: 12px; background: var(--bg); }
.mg-bar { height: 0.7rem; border-radius: 99px; background: linear-gradient(90deg, #D6336C, #E8590C 30%, #E0A21C 55%, #1F9D5A 85%); position: relative; opacity: 0.35; }
.mg-v { margin-top: 0.6rem; }
.mg-mos { font: 700 clamp(2.2rem, 7vw, 3rem) / 1 var(--mono); }
.g-best .mg-mos, .g-high .mg-mos { color: #1F9D5A; }
.g-medium .mg-mos { color: color-mix(in srgb, var(--host) 75%, var(--ink)); }
.g-low .mg-mos, .g-poor .mg-mos { color: var(--err); }
.mg-l { color: var(--muted); font-weight: 700; }
.mg-t { margin: 0.4rem 0 0; }
.mostable td.cur { background: var(--net-soft); font-weight: 700; }

.smtext { width: 100%; font: 0.85rem/1.45 var(--mono); color: var(--ink); background: var(--bg); border: 2px solid var(--rule); border-radius: 8px; padding: 0.7rem 0.8rem; resize: vertical; }
.smtext:focus { outline: none; border-color: var(--net); }
.smout .pbig { margin: 1.25rem 0 0.5rem; font-size: 1.1rem; }
.ladder { margin-top: 0.75rem; overflow-x: auto; border: 1px solid var(--rule); border-radius: 10px; background: var(--surface); }
.lhead, .lbody { display: grid; grid-template-columns: repeat(var(--cols), minmax(9rem, 1fr)); min-width: calc(var(--cols) * 9rem); }
.lhead { position: sticky; top: 0; background: var(--bg); border-bottom: 1px solid var(--rule); }
.lh { padding: 0.5rem; text-align: center; font: 600 0.8rem var(--mono); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lbody { background-image: repeating-linear-gradient(90deg, transparent 0, transparent calc(100% / var(--cols) / 2 - 1px), var(--rule) calc(100% / var(--cols) / 2 - 1px), var(--rule) calc(100% / var(--cols) / 2), transparent calc(100% / var(--cols) / 2), transparent calc(100% / var(--cols))); padding: 0.25rem 0; }
.lrow { all: unset; box-sizing: border-box; cursor: pointer; display: flex; flex-direction: column; align-items: center; padding: 0.2rem 0; margin-inline: calc(100% / (2 * var(--span, 2))); font-size: 0.85rem; }
.lrow .ll { font: 600 0.82rem var(--mono); padding: 0 0.3rem; background: var(--surface); }
.lrow .la { width: 100%; height: 2px; background: currentColor; position: relative; margin-top: 2px; }
.lrow .la::after { content: ''; position: absolute; right: -1px; top: -4px; border: 5px solid transparent; border-left: 8px solid currentColor; border-right: 0; }
.lrow.back .la::after { right: auto; left: -1px; border-left: 0; border-right: 8px solid currentColor; }
.lrow.req { color: var(--net); }
.lrow.prov { color: var(--muted); }
.lrow.ok { color: #1F9D5A; }
.lrow.err { color: var(--err); }
.lrow:hover .ll, .lrow.on .ll { text-decoration: underline; }
.lrow.on { background: var(--net-soft); border-radius: 6px; }
.lrow .tag { font-size: 0.7rem; }
.smdetail { margin-top: 1rem; }
.sipraw { font: 0.8rem/1.45 var(--mono); background: var(--bg); padding: 0.8rem; border-radius: 8px; overflow-x: auto; white-space: pre; }
.sipraw b { color: var(--net); font-weight: 600; }
.bgpsum { margin-top: 1.25rem; }
.bgpsum .bgpprefix { font-size: clamp(1.6rem, 4.5vw, 2.4rem); line-height: 1.1; overflow-wrap: anywhere; }
.mg-bar { opacity: 1; height: 0.6rem; }
.mg-bar i { position: absolute; top: 50%; width: 1.1rem; height: 1.1rem; margin: -0.55rem 0 0 -0.55rem; border-radius: 50%; background: var(--surface); border: 3px solid var(--ink); box-shadow: 0 1px 3px rgb(0 0 0 / 0.25); }
.actions-inline .ghostbtn { font: 700 0.95rem var(--sans); border: 0; border-radius: 9px; padding: 0.65rem 1rem; cursor: pointer; }

/* ================================================================ design v2 (Oct 2026)
   Quieter, product-style look: neutral surfaces, one brand blue, Inter + JetBrains Mono,
   category accents only on icons. Overrides the tokens and components above. */

:root {
  --bg: #F6F7F9;
  --surface: #FFFFFF;
  --ink: #0F172A;
  --muted: #5B6474;
  --rule: #E2E6EC;
  --net: #1D4ED8;
  --net-ink: #FFFFFF;
  --net-soft: #EEF3FF;
  --host: #D99A0B;
  --host-soft: #FEF6E4;
  --land: #D5DCE6;
  --land-hover: #A9B8CC;
  --sans: 'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace;
  --shadow: 0 1px 2px rgb(15 23 42 / 0.04), 0 1px 3px rgb(15 23 42 / 0.06);
  --shadow-up: 0 4px 6px -1px rgb(15 23 42 / 0.06), 0 12px 24px -4px rgb(15 23 42 / 0.10);
  --shadow-pop: 0 10px 15px -3px rgb(15 23 42 / 0.10), 0 24px 48px -12px rgb(15 23 42 / 0.18);
  --header-bg: rgb(255 255 255 / 0.92);
  --c-net: #1D4ED8; --c-dns: #7C3AED; --c-voip: #0F766E; --c-phone: #B45309; --c-subnet: #475569;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0B1120;
    --surface: #111827;
    --ink: #E5E7EB;
    --muted: #9CA3AF;
    --rule: #1F2937;
    --net: #60A5FA;
    --net-ink: #0B1120;
    --net-soft: #172554;
    --host: #F5B83D;
    --host-soft: #3A2E14;
    --land: #273244;
    --land-hover: #3B4A60;
    --shadow: 0 1px 2px rgb(0 0 0 / 0.4);
    --shadow-up: 0 8px 24px rgb(0 0 0 / 0.45);
    --shadow-pop: 0 16px 48px rgb(0 0 0 / 0.55);
    --header-bg: rgb(11 17 32 / 0.92);
    --c-net: #60A5FA; --c-dns: #A78BFA; --c-voip: #2DD4BF; --c-phone: #FBBF24; --c-subnet: #94A3B8;
  }
}
.cat-net { --c: var(--c-net); } .cat-dns { --c: var(--c-dns); } .cat-voip { --c: var(--c-voip); }
.cat-phone { --c: var(--c-phone); } .cat-subnet { --c: var(--c-subnet); }

body { background: var(--bg); font-size: 1rem; line-height: 1.6; -webkit-font-smoothing: antialiased; }
body.noscroll { overflow: hidden; }
.wrap { max-width: 74rem; }
h1 { font-weight: 700; letter-spacing: -0.025em; font-size: clamp(1.9rem, 4vw, 2.6rem); }
h2 { font-weight: 650; letter-spacing: -0.01em; font-size: 1.3rem; }
h3 { font-weight: 600; }
.lede { font-size: 1.075rem; color: var(--muted); }
.mono, code { font-feature-settings: 'zero' 0; }
.eyebrow { margin: 0 0 0.5rem; font-size: 0.78rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--c, var(--net)); }

/* header */
header.site { position: sticky; top: 0; z-index: 50; background: var(--header-bg); -webkit-backdrop-filter: saturate(1.4) blur(10px); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--rule); }
header.site .bar { min-height: 4rem; gap: 1.5rem; flex-wrap: nowrap; }
.wordmark { font-size: 1.1rem; font-weight: 700; letter-spacing: -0.02em; }
.sitenav { display: flex; align-items: center; gap: 0.15rem; margin-right: auto; }
.navgroup { position: relative; }
.navbtn { display: inline-flex; align-items: center; gap: 0.3rem; font: 500 0.94rem var(--sans); color: var(--ink); background: none; border: 0; border-radius: 8px; padding: 0.5rem 0.75rem; cursor: pointer; white-space: nowrap; }
.navbtn:hover, .navgroup.open .navbtn { background: color-mix(in srgb, var(--ink) 6%, transparent); }
.navgroup.current .navbtn { color: var(--net); }
.navbtn .chev { width: 0.75rem; height: 0.75rem; fill: none; stroke: currentColor; stroke-width: 1.6; transition: transform 0.15s; opacity: 0.7; }
.navgroup.open .chev { transform: rotate(180deg); }
.navpanel { display: none; position: absolute; top: calc(100% + 0.5rem); left: 0; width: min(40rem, 92vw); background: var(--surface); border: 1px solid var(--rule); border-radius: 14px; box-shadow: var(--shadow-pop); padding: 0.6rem; z-index: 60; }
.navgroup:nth-last-child(-n+2) .navpanel { left: auto; right: 0; }
.navgroup.open .navpanel { display: block; }
@media (hover: hover) and (min-width: 62.01rem) {
  .navgroup:hover .navpanel { display: block; }
  .navgroup:hover .navbtn { background: color-mix(in srgb, var(--ink) 6%, transparent); }
  .navpanel::before { content: ''; position: absolute; left: 0; right: 0; top: -0.6rem; height: 0.6rem; }
}
.navlist { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.15rem; }
.navitem, .toolcard { display: flex; gap: 0.75rem; align-items: flex-start; text-decoration: none; color: var(--ink); border-radius: 10px; }
.navitem { padding: 0.6rem 0.65rem; }
.navitem:hover, .navitem[aria-current="page"] { background: color-mix(in srgb, var(--c, var(--net)) 8%, transparent); }
.ti { flex: none; display: grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 9px; background: color-mix(in srgb, var(--c, var(--net)) 11%, transparent); color: var(--c, var(--net)); }
.ti svg { width: 1.2rem; height: 1.2rem; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.tt { display: flex; flex-direction: column; min-width: 0; }
.tt strong { font-weight: 600; font-size: 0.93rem; line-height: 1.3; }
.tt span { color: var(--muted); font-size: 0.83rem; line-height: 1.4; margin-top: 0.1rem; }
.lang { font: 600 0.82rem var(--sans); color: var(--muted); border: 1px solid var(--rule); border-radius: 7px; padding: 0.3rem 0.55rem; text-decoration: none; }
.lang:hover { color: var(--ink); border-color: var(--muted); }
.navtoggle { display: none; margin-left: auto; width: 2.5rem; height: 2.5rem; border: 1px solid var(--rule); border-radius: 9px; background: var(--surface); cursor: pointer; flex-direction: column; justify-content: center; align-items: center; gap: 4px; }
.navtoggle span { display: block; width: 1.1rem; height: 2px; background: var(--ink); border-radius: 2px; transition: transform 0.15s, opacity 0.15s; }
@media (max-width: 62rem) {
  header.site .bar { flex-wrap: nowrap; }
  .navtoggle { display: inline-flex; }
  .lang { order: 3; }
  .sitenav { display: none; position: fixed; top: 4rem; left: 0; right: 0; bottom: 0; overflow-y: auto; background: var(--surface); padding: 0.75rem 1rem 3rem; flex-direction: column; align-items: stretch; gap: 0.25rem; border-top: 1px solid var(--rule); width: auto; margin: 0; }
  header.menuopen .sitenav { display: flex; }
  header.menuopen .navtoggle span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
  header.menuopen .navtoggle span:nth-child(2) { opacity: 0; }
  header.menuopen .navtoggle span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }
  .navbtn { width: 100%; justify-content: space-between; font-weight: 600; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--muted); padding: 0.75rem 0.25rem 0.35rem; pointer-events: none; }
  .navbtn .chev { display: none; }
  .navpanel { display: block; position: static; width: auto; border: 0; box-shadow: none; padding: 0; }
  .navlist { grid-template-columns: 1fr; }
}
/* the old header rules wrapped the nav onto a second row; the new menu never does */
header nav { order: initial; width: auto; overflow: visible; white-space: normal; }

/* surfaces */
.tool, .factsheet { border: 1px solid var(--rule); border-radius: 14px; box-shadow: var(--shadow); }
main { padding-block: 2.5rem 4rem; }
main.home { padding-top: 0; }
.button { border-radius: 9px; font-weight: 600; box-shadow: none; }
.prose { max-width: 70ch; }

/* home: hero */
.hero2 { display: grid; gap: 2rem; align-items: end; padding: 3.25rem 0 2rem; }
@media (min-width: 56rem) { .hero2 { grid-template-columns: minmax(0, 1.65fr) minmax(0, 1fr); } }
.hero2 h1 { font-size: clamp(2.2rem, 5vw, 3.4rem); line-height: 1.08; max-width: 16ch; }
.hero2 .lede { max-width: 56ch; margin-top: 1rem; }
.toolsearch { position: relative; margin-top: 1.75rem; max-width: 36rem; }
.toolsearch svg { position: absolute; left: 1rem; top: 50%; width: 1.2rem; height: 1.2rem; margin-top: -0.6rem; fill: none; stroke: var(--muted); stroke-width: 2; stroke-linecap: round; }
.toolsearch input { width: 100%; font: 500 1.02rem var(--sans); color: var(--ink); background: var(--surface); border: 1px solid var(--rule); border-radius: 12px; padding: 0.95rem 1rem 0.95rem 2.9rem; box-shadow: var(--shadow); }
.toolsearch input:focus { outline: none; border-color: var(--net); box-shadow: 0 0 0 4px color-mix(in srgb, var(--net) 15%, transparent); }
.ipcard { display: flex; flex-direction: column; gap: 0.35rem; padding: 1.4rem 1.5rem; background: var(--surface); border: 1px solid var(--rule); border-radius: 14px; box-shadow: var(--shadow); color: var(--ink); text-decoration: none; transition: border-color 0.15s, box-shadow 0.15s; }
.ipcard:hover { border-color: var(--net); box-shadow: var(--shadow-up); }
.ipcard .yl { font-size: 0.78rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); }
.ipcard .yv { font-size: clamp(1.4rem, 3vw, 1.9rem); font-weight: 600; color: var(--net); overflow-wrap: anywhere; line-height: 1.2; }
.ipcard .yw { color: var(--muted); display: inline-flex; gap: 0.45rem; align-items: center; font-size: 0.92rem; }
.ipcard .ymore { margin-top: 0.6rem; font-size: 0.85rem; font-weight: 600; color: var(--net); }

/* home: quick checks */
.quickrow { display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }
.qcard { background: var(--surface); border: 1px solid var(--rule); border-radius: 14px; padding: 1rem; box-shadow: var(--shadow); }
.qcard label { display: flex; align-items: center; gap: 0.6rem; font-weight: 600; font-size: 0.95rem; margin-bottom: 0.7rem; }
.qcard .ti { width: 1.9rem; height: 1.9rem; border-radius: 8px; }
.qcard .ti svg { width: 1.05rem; height: 1.05rem; }
.qrow { display: flex; gap: 0.4rem; }
.qrow input { flex: 1; min-width: 0; font: 500 0.92rem var(--mono); color: var(--ink); background: var(--bg); border: 1px solid var(--rule); border-radius: 9px; padding: 0.55rem 0.65rem; }
.qrow input:focus { outline: none; border-color: var(--net); background: var(--surface); }
.qrow button { flex: none; font: 600 0.88rem var(--sans); color: var(--net-ink); background: var(--net); border: 0; border-radius: 9px; padding: 0 0.85rem; cursor: pointer; }
.qrow button:hover { filter: brightness(1.08); }

/* catalogue */
.catalog { margin-top: 3rem; }
.catsec + .catsec { margin-top: 2.5rem; }
.cathead { display: flex; align-items: center; gap: 0.7rem; margin-bottom: 1rem; }
.cathead h2 { font-size: 1.2rem; }
.cathead .count { font: 600 0.78rem var(--sans); color: var(--muted); background: color-mix(in srgb, var(--ink) 6%, transparent); border-radius: 99px; padding: 0.1rem 0.55rem; }
.toolgrid { display: grid; gap: 0.75rem; grid-template-columns: repeat(auto-fill, minmax(16.5rem, 1fr)); }
.toolcard { padding: 1rem; background: var(--surface); border: 1px solid var(--rule); box-shadow: var(--shadow); border-radius: 12px; transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s; }
.toolcard:hover { border-color: color-mix(in srgb, var(--c, var(--net)) 45%, var(--rule)); box-shadow: var(--shadow-up); transform: translateY(-1px); }
.toolcard[aria-current="page"] { border-color: var(--c, var(--net)); }
.nofound { color: var(--muted); }
.mapband { margin-top: 4rem; }

/* related tools on every tool page */
.related { margin-top: 4.5rem; padding-top: 2.5rem; border-top: 1px solid var(--rule); }
.related h2 { font-size: 1.15rem; margin-bottom: 1rem; }

/* footer */
footer.site { background: var(--surface); border-top: 1px solid var(--rule); padding-block: 3rem 2rem; color: var(--muted); font-size: 0.9rem; }
.fgrid { display: grid; gap: 2rem 1.5rem; grid-template-columns: repeat(2, minmax(0, 1fr)); }
@media (min-width: 48rem) { .fgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 64rem) { .fgrid { grid-template-columns: 1.5fr repeat(5, minmax(0, 1fr)); } }
.fbrand { grid-column: 1 / -1; }
@media (min-width: 64rem) { .fbrand { grid-column: auto; } }
.fbrand p { margin: 0.75rem 0 0; max-width: 32ch; }
.fcol h2 { font-size: 0.75rem; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ink); margin: 0 0 0.75rem; }
.fcol ul { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.45rem; }
footer.site a { color: var(--muted); text-decoration: none; }
footer.site a:hover { color: var(--ink); text-decoration: underline; }
.fnote { margin: 2rem 0 0; font-size: 0.82rem; }
.fbottom { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 0.75rem 1.5rem; margin-top: 2rem; padding-top: 1.25rem; border-top: 1px solid var(--rule); font-size: 0.85rem; }
.fbottom nav { display: flex; flex-wrap: wrap; gap: 0.5rem 1.25rem; }
@media (max-width: 62rem) {
  /* the header's backdrop-filter makes it the containing block of fixed children: size the menu from it */
  .sitenav { top: 100%; bottom: auto; height: calc(100dvh - 4rem); }
  .lang { order: 2; margin-left: auto; }
  .navtoggle { order: 3; margin-left: 0.5rem; }
}

/* ---------------------------------------------------------------- AI agent tools */
.button.small { padding: 0.35rem 0.75rem; font-size: 0.85rem; }
.aitable td { vertical-align: middle; }
.aitable tr.human td { background: var(--bg); }
.codebox { position: relative; }
.codebox .cfgcopy { position: absolute; top: 0.5rem; right: 0.5rem; margin: 0; font-size: 0.8rem; padding: 0.25rem 0.7rem; }
.cfg { max-height: 32rem; overflow: auto; padding-top: 2.4rem; }
.aisteps { margin: 0.5rem 0 0; padding-left: 1.3rem; display: grid; gap: 0.35rem; }
.aisipout code { font-size: 0.9rem; }

/* ---------------------------------------------------------------- WireGuard, SPF/DMARC */
.cf.wide2 { grid-column: span 2; }
@media (max-width: 40rem) { .cf.wide2 { grid-column: auto; } }
.codebox .cbtns { position: absolute; top: 0.5rem; right: 0.5rem; display: flex; gap: 0.35rem; }
.codebox .cbtns .copy { margin: 0; font-size: 0.8rem; padding: 0.25rem 0.7rem; }
.wgclients { display: grid; gap: 1rem; }
.wgclient { display: grid; gap: 1rem; grid-template-columns: 1fr; border: 1px solid var(--rule); border-radius: 12px; padding: 1rem; background: var(--surface); }
@media (min-width: 48rem) { .wgclient { grid-template-columns: 13rem minmax(0, 1fr); align-items: start; } }
.wgqr { background: #fff; border-radius: 8px; padding: 0.25rem; max-width: 13rem; }
.wgqr svg { display: block; width: 100%; height: auto; }
.wgcbody h3 { margin: 0 0 0.5rem; }
.wgcbody .cfg { max-height: 18rem; }
.domainfield { max-width: 24rem; margin-bottom: 0.5rem; }
.svcgrid { display: grid; gap: 0.4rem 1rem; grid-template-columns: repeat(auto-fill, minmax(13rem, 1fr)); margin: 0.75rem 0 1rem; }
.svc { display: flex; align-items: center; gap: 0.45rem; padding: 0.45rem 0.6rem; border: 1px solid var(--rule); border-radius: 9px; cursor: pointer; font-size: 0.92rem; }
.svc:has(input:checked) { border-color: var(--net); background: var(--net-soft); }
.dnsrec { display: grid; gap: 0.5rem 1rem; grid-template-columns: auto auto minmax(0, 1fr); align-items: start; margin-top: 1rem; padding: 0.9rem 1rem; border: 1px solid var(--rule); border-radius: 12px; background: var(--bg); }
@media (max-width: 40rem) { .dnsrec { grid-template-columns: 1fr; } }
.dnsrec > div { display: flex; flex-direction: column; gap: 0.15rem; min-width: 0; }
.dnsrec .v { flex-direction: column; }
.dnsrec code { font-size: 0.92rem; }
.dnsrec .copy { align-self: flex-start; margin-top: 0.4rem; }

/* ---------------------------------------------------------------- SSL */
.sslhead { display: flex; gap: 1.1rem; align-items: center; margin-top: 1.25rem; padding: 1rem 1.25rem; border-radius: 12px; border-left: 4px solid #1F9D5A; background: color-mix(in srgb, #1F9D5A 7%, var(--surface)); }
.sslhead.warn { border-left-color: var(--host); background: color-mix(in srgb, var(--host) 9%, var(--surface)); }
.sslhead.bad { border-left-color: var(--err); background: color-mix(in srgb, var(--err) 7%, var(--surface)); }
.sslhead .pbig { margin: 0; font-size: 1.2rem; }
.sslhead p { margin: 0.2rem 0 0; }
.sslbig { flex: none; display: grid; place-items: center; min-width: 3.4rem; height: 3.4rem; border-radius: 12px; background: var(--surface); font: 700 1.6rem var(--mono); color: #1F9D5A; padding: 0 0.5rem; }
.sslhead.warn .sslbig { color: color-mix(in srgb, var(--host) 75%, var(--ink)); }
.sslhead.bad .sslbig { color: var(--err); }
.sslcert { margin-top: 1rem; }
.chip { display: inline-block; font-size: 0.82rem; padding: 0.1rem 0.45rem; margin: 0.1rem 0.15rem 0.1rem 0; border: 1px solid var(--rule); border-radius: 6px; background: var(--bg); }
.csrcmd { white-space: pre-wrap; }
.sslhead .pbig { font-family: var(--sans); font-weight: 700; }

/* MikroTik generator */
.vlans { display: grid; gap: 0.5rem; }
.vlanrow { display: grid; grid-template-columns: 6rem 1fr 1.4fr auto auto; gap: 0.5rem; align-items: center; }
.vlanrow label { display: inline-flex; align-items: center; gap: 0.35rem; white-space: nowrap; }
.vlanrow .vdel { padding: 0.3rem 0.75rem; font-size: 1.15rem; line-height: 1; }
.addvlan { white-space: nowrap; flex: none; }
.actions-inline:has(.addvlan) { display: flex; gap: 1rem; align-items: center; }
@media (max-width: 640px) { .actions-inline:has(.addvlan) { flex-direction: column; align-items: flex-start; } }
.mtcfg { max-height: 34rem; overflow: auto; }
.tool .rh:first-child { margin-top: 0; }
@media (max-width: 640px) { .vlanrow { grid-template-columns: 5rem 1fr; } .vlanrow input[name=vcidr] { grid-column: 1 / -1; } }

/* speed test: server choice + M-Lab notice */
.sp-servers { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0.5rem; margin-bottom: 1rem; }
.sp-srv { position: relative; display: block; cursor: pointer; }
.sp-srv input { position: absolute; opacity: 0; pointer-events: none; }
.sp-srv span { display: block; height: 100%; padding: 0.6rem 0.85rem; border: 2px solid var(--rule); border-radius: 10px; background: var(--surface); transition: border-color 0.15s, background 0.15s; }
.sp-srv b { display: block; font-size: 1rem; }
.sp-srv small { display: block; color: var(--muted); font-size: 0.82rem; line-height: 1.35; }
.sp-srv:hover span { border-color: color-mix(in srgb, var(--net) 45%, var(--rule)); }
.sp-srv input:checked + span { border-color: var(--net); background: var(--net-soft); }
.sp-srv input:focus-visible + span { outline: 3px solid color-mix(in srgb, var(--net) 35%, transparent); outline-offset: 2px; }
.sp-srv input:disabled + span { opacity: 0.6; cursor: default; }
.sp-consent { margin: 0.75rem 0 0; padding: 0.6rem 0.85rem; border-left: 4px solid var(--net); background: var(--net-soft); border-radius: 0 8px 8px 0; font-size: 0.9rem; }
.sp-far { margin-top: 0.75rem; }

/* ---------------------------------------------------------------- polish (Oct 28) */

html, body { overflow-x: clip; }

/* hero: soft colour and a faint network grid behind it */
.hero2 { position: relative; isolation: isolate; }
.hero2::before {
  content: ""; position: absolute; z-index: -1; top: -3rem; bottom: -1.5rem; left: calc(50% - 50vw); right: calc(50% - 50vw);
  background:
    radial-gradient(40rem 18rem at 85% 20%, color-mix(in srgb, var(--net) 12%, transparent), transparent 70%),
    radial-gradient(30rem 16rem at 10% 0%, color-mix(in srgb, #F2A33A 10%, transparent), transparent 70%),
    linear-gradient(to right, color-mix(in srgb, var(--net) 6%, transparent) 1px, transparent 1px) 0 0 / 2.5rem 2.5rem,
    linear-gradient(to bottom, color-mix(in srgb, var(--net) 6%, transparent) 1px, transparent 1px) 0 0 / 2.5rem 2.5rem;
  -webkit-mask-image: linear-gradient(to bottom, #000 55%, transparent);
  mask-image: linear-gradient(to bottom, #000 55%, transparent);
}
.herofacts { list-style: none; padding: 0; margin: 1.25rem 0 0; display: flex; flex-wrap: wrap; gap: 0.5rem; }
.herofacts li { display: inline-flex; align-items: baseline; gap: 0.35rem; padding: 0.35rem 0.75rem; border: 1px solid var(--rule); border-radius: 999px; background: color-mix(in srgb, var(--surface) 85%, transparent); font-size: 0.88rem; color: var(--muted); }
.herofacts b { color: var(--ink); font-weight: 700; }

/* "new" badge */
.newtag { display: inline-block; vertical-align: 0.12em; margin-left: 0.3rem; padding: 0.05rem 0.4rem; border-radius: 999px; font: 700 0.62rem/1.4 var(--sans); letter-spacing: 0.04em; text-transform: uppercase; font-style: normal; color: #fff; background: linear-gradient(135deg, #2457D6, #7A4CE0); }

/* tool cards: a touch more depth on hover */
.toolcard { transition: transform 0.15s ease, box-shadow 0.15s ease, border-color 0.15s ease; }
.toolcard:hover { transform: translateY(-2px); }
@media (prefers-reduced-motion: reduce) { .toolcard, .toolcard:hover { transition: none; transform: none; } }

/* article + contents panel */
.docgrid { margin-top: 3rem; }
.docgrid > .prose { margin-top: 0; }
.toc { display: none; }
@media (min-width: 72rem) {
  .docgrid { display: grid; grid-template-columns: minmax(0, 1fr) 17rem; gap: 3rem; align-items: start; }
  .docgrid > .prose { max-width: 70ch; }
  .toc { display: block; position: sticky; top: 5.5rem; padding: 1rem 1.1rem; border: 1px solid var(--rule); border-radius: 12px; background: var(--surface); box-shadow: var(--shadow); font-size: 0.9rem; }
  .toch { margin: 0 0 0.5rem; font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--muted); }
  .toc ol { list-style: none; padding: 0; margin: 0; display: grid; gap: 0.15rem; counter-reset: toc; }
  .toc li a { display: block; padding: 0.3rem 0.5rem 0.3rem 0.7rem; border-left: 2px solid var(--rule); color: var(--ink); text-decoration: none; line-height: 1.35; }
  .toc li a:hover, .toc li a.on { border-left-color: var(--net); color: var(--net); background: var(--net-soft); border-radius: 0 6px 6px 0; }
  .tocmail { margin: 0.9rem 0 0; padding-top: 0.75rem; border-top: 1px solid var(--rule); color: var(--muted); font-size: 0.82rem; }
}
.prose h2[id] { scroll-margin-top: 5.5rem; }

/* footer sources */
.fsrc { margin: 0.75rem 0 0; font-size: 0.8rem; color: var(--muted); line-height: 1.5; }
.hero2 { align-items: center; }
@media (max-width: 40rem) {
  .herofacts { display: grid; grid-template-columns: 1fr 1fr; gap: 0.4rem; }
  .herofacts li { flex-direction: column; gap: 0; border-radius: 10px; padding: 0.45rem 0.65rem; font-size: 0.8rem; line-height: 1.3; }
  .herofacts b { font-size: 0.95rem; }
}

/* AI explanation panel */
.aibox { margin: 1.5rem 0; padding: 1.1rem 1.25rem; border-radius: 12px; border: 1px solid color-mix(in srgb, #7A4CE0 30%, var(--rule)); background: linear-gradient(135deg, color-mix(in srgb, #7A4CE0 6%, var(--surface)), color-mix(in srgb, var(--net) 5%, var(--surface))); }
.aihead { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 0.5rem 1rem; }
.aihead .rh { margin: 0; }
.aispark { color: #7A4CE0; }
.ainote { margin: 0.5rem 0 0; font-size: 0.82rem; }
.aichat { display: grid; gap: 0.75rem; }
.aichat:not(:empty) { margin-top: 1rem; }
.aimsg { padding: 0.9rem 1.05rem; background: var(--surface); border-radius: 10px; border: 1px solid var(--rule); line-height: 1.55; overflow-wrap: anywhere; }
.aimsg h4 { margin: 0.9rem 0 0.35rem; font-size: 1rem; }
.aimsg h4:first-child { margin-top: 0; }
.aimsg p { margin: 0 0 0.6rem; }
.aimsg ul, .aimsg ol { margin: 0 0 0.6rem; padding-left: 1.3rem; }
.aimsg li { margin: 0.2rem 0; }
.aimsg code { font: 0.88em var(--mono); background: var(--bg); padding: 0.05rem 0.3rem; border-radius: 4px; }
.aimsg pre { margin: 0.4rem 0 0.7rem; }
.aimsg > :last-child { margin-bottom: 0; }
.aiq { justify-self: end; max-width: 85%; padding: 0.5rem 0.8rem; border-radius: 10px; background: var(--net-soft); font-size: 0.95rem; }
.aiask { margin-top: 0.9rem; }
.aiask label { display: block; margin-bottom: 0.3rem; }
.aiask input { flex: 1; min-width: 0; font: 1rem var(--sans); padding: 0.55rem 0.7rem; border: 2px solid var(--rule); border-radius: 8px; background: var(--bg); color: var(--ink); }
.aiask input:focus { outline: none; border-color: var(--net); }
.aibox .err { margin: 0.75rem 0 0; }
.aictl { display: flex; flex-wrap: wrap; align-items: center; gap: 0.5rem 0.75rem; }
.aimodel { display: inline-flex; align-items: center; gap: 0.4rem; }
.aimodel select { font: 600 0.9rem var(--sans); color: var(--ink); background: var(--surface); border: 1px solid var(--rule); border-radius: 8px; padding: 0.45rem 0.55rem; }
.aiwho { margin: 0.6rem 0 0 !important; font-size: 0.78rem; color: var(--muted); }
section.tool + .aibox { margin-top: 1.25rem; }

/* ---------------------------------------------------------------- tools batch Oct 28 */
.segtabs { display: inline-flex; flex-wrap: wrap; gap: 0.25rem; padding: 0.25rem; margin: 1.25rem 0 0.25rem; background: var(--bg); border: 1px solid var(--rule); border-radius: 10px; }
.segtabs button { font: 700 0.92rem var(--sans); color: var(--muted); background: transparent; border: 0; border-radius: 8px; padding: 0.45rem 0.9rem; cursor: pointer; }
.segtabs button.on { background: var(--surface); color: var(--net); box-shadow: var(--shadow); }
.segtabs button:hover:not(.on) { color: var(--ink); }

/* MTU */
.mtustack { margin: 0.75rem 0 0; padding: 0; list-style: none; display: grid; gap: 0.35rem; }
.mtustack li { display: flex; align-items: center; gap: 0.5rem; padding: 0.4rem 0.7rem; background: var(--bg); border-radius: 8px; }
.mtustack .mdel { margin-left: auto; padding: 0.15rem 0.6rem; font-size: 1.1rem; line-height: 1; }
.mtubig { display: grid; grid-template-columns: repeat(auto-fit, minmax(9rem, 1fr)); gap: 0.6rem; margin-top: 1.25rem; }
.mtubig > div { background: var(--bg); border-radius: 10px; padding: 0.7rem 0.9rem; }
.mtubig .k { display: block; color: var(--muted); font-size: 0.85rem; font-weight: 700; }
.mtubig .v { font-size: clamp(1.5rem, 4vw, 2.1rem); font-weight: 600; color: var(--net); }
.mbar { display: flex; height: 2rem; margin: 1rem 0; border-radius: 8px; overflow: hidden; font: 600 0.75rem/2rem var(--mono); color: #fff; }
.mbar span { min-width: 0; overflow: hidden; white-space: nowrap; text-align: center; padding: 0 0.3rem; }
.mpay { background: var(--net); }
.mseg:nth-child(2n) { background: #D9822B; }
.mseg:nth-child(2n+1) { background: #7A4CE0; }

/* email headers */
.ehops td { vertical-align: top; }
.ehops .r { position: relative; min-width: 7rem; }
.ehbar { position: absolute; left: 0.5rem; right: 0.5rem; top: 50%; height: 0.4rem; transform: translateY(-50%); }
.ehbar::before { content: ""; position: absolute; right: 0; height: 100%; width: var(--w, 0); background: color-mix(in srgb, var(--net) 18%, transparent); border-radius: 4px; }
.ehops .r .mono { position: relative; }
.ehops .bad { color: var(--err); font-weight: 700; }
.ehall { margin-top: 1rem; }
.ehall summary { cursor: pointer; font-weight: 700; }

/* HTTP headers */
.hgrade { font-size: 2.2rem; font-weight: 800; }
.hchain { margin: 0.5rem 0 0; padding-left: 1.4rem; display: grid; gap: 0.35rem; }

/* DMARC */
.dmtable td { vertical-align: top; }
.dmtable .small, td.small { font-size: 0.85rem; }
.dmtable td:first-child { min-width: 11rem; }