:root{
  color-scheme:light dark;
  --bg:light-dark(#f4f6f9, #0d1015);--surface:light-dark(#fff, #161a21);--surface-2:light-dark(#eef1f6, #1d222b);
  --line:light-dark(#d6dbe4, #2b323e);--text:light-dark(#121722, #e8ecf3);--muted:light-dark(#475266, #a4aebd);
  --accent:light-dark(#1d4ed8, #8ab4ff);--on-accent:light-dark(#fff, #0b1220);
  --ok:light-dark(#0a6a38, #5fd29a);--ok-bg:light-dark(#e3f5ec, #12281e);
  --bad:light-dark(#b3261e, #ff9a92);--bad-bg:light-dark(#fdeceb, #301614);
  --warn:light-dark(#85490a, #f5c26b);--warn-bg:light-dark(#fff2dd, #2b2112);
  --ease:cubic-bezier(.2, .8, .2, 1);
  font:16px/1.55 system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
}
*{box-sizing:border-box}
body{margin:0;color:var(--text);background:var(--bg);min-height:100dvh}
h1, h2, h3, p{margin:0}
a{color:var(--accent)}
kbd{font:.8rem ui-monospace, monospace;padding:.05rem .4rem;border:1px solid var(--line);border-radius:.35rem;background:var(--surface)}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:.4rem}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
.skip{position:absolute;left:.5rem;top:-4rem;background:var(--accent);color:var(--on-accent);padding:.5rem .9rem;z-index:9}
.skip:focus{top:.5rem}
.muted, .meta{color:var(--muted)}

.top{max-width:60rem;margin:0 auto;padding:1rem 1rem 0;display:flex;align-items:center;justify-content:space-between;gap:1rem}
.brand{display:inline-flex;align-items:center;gap:.6rem;font-weight:750;font-size:1.15rem;color:var(--text);text-decoration:none}
.mark{width:1.75rem;height:1.75rem;border-radius:.4rem;flex:none}
nav{display:flex;flex-wrap:wrap;gap:.2rem 1.1rem;font-size:.92rem}
nav a{color:var(--muted);text-decoration:none;padding:.25rem 0}
nav a:hover{color:var(--text);text-decoration:underline}
main{max-width:60rem;margin:0 auto;padding:1.5rem 1rem 3rem}

.hero h1{font-size:clamp(1.75rem, 5vw, 2.6rem);line-height:1.15;text-wrap:balance}
.lead{color:var(--muted);margin:.75rem 0 1.5rem;max-width:42rem}
.field{display:flex;gap:.5rem;padding:.4rem;background:var(--surface);border:1px solid var(--line);border-radius:1.1rem}
.field:focus-within{border-color:var(--accent)}
input[type=text]{flex:1;min-width:0;font:inherit;font-size:1.1rem;padding:.7rem .8rem;border:0;background:transparent;color:var(--text)}
input[type=text]:focus-visible{outline:none}
button{font:inherit;cursor:pointer}
#go{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;min-width:7.5rem;padding:.7rem 1.4rem;border:0;border-radius:.8rem;font-weight:700;background:var(--accent);color:var(--on-accent);transition:transform .15s var(--ease)}
#go:hover{transform:translateY(-1px)}
#go:active{transform:scale(.96)}
#go:disabled{cursor:progress;opacity:.8}
.spin{display:none;width:1rem;height:1rem;border:2px solid;border-right-color:transparent;border-radius:50%;animation:spin .7s linear infinite}
#go:disabled .spin{display:block}
@keyframes spin{to{transform:rotate(1turn)}}
.hint{margin:.6rem .2rem 0;color:var(--muted);font-size:.85rem}

.switch{display:flex;gap:.8rem;align-items:flex-start;margin-top:1.1rem;padding:.8rem .9rem;border:1px solid var(--line);border-radius:.9rem;background:var(--surface);cursor:pointer}
.switch input{position:absolute;opacity:0}
.track{flex:none;width:2.6rem;height:1.5rem;border-radius:2rem;background:var(--surface-2);border:1px solid var(--line);position:relative}
.thumb{position:absolute;top:.15rem;left:.15rem;width:1.1rem;height:1.1rem;border-radius:50%;background:var(--muted);transition:transform .25s var(--ease)}
.switch input:checked + .track{background:var(--accent);border-color:var(--accent)}
.switch input:checked + .track .thumb{transform:translateX(1.1rem);background:var(--on-accent)}
.switch input:focus-visible + .track{outline:3px solid var(--accent);outline-offset:2px}
.switch-text{display:grid;gap:.15rem}
.switch-text small{color:var(--muted);font-size:.85rem;line-height:1.4}

.result{margin-top:2rem;scroll-margin-top:1rem;outline:none}
.rise{animation:rise .4s var(--ease) both}
@keyframes rise{from{opacity:0;transform:translateY(12px)}}
.card{background:var(--surface);border:1px solid var(--line);border-radius:1rem;padding:1.1rem 1.2rem;margin-bottom:1rem}

.verdict{--c:var(--ok);--cbg:var(--ok-bg);display:grid;grid-template-columns:auto 1fr;gap:1rem 1.2rem;padding:1.4rem;border-color:color-mix(in srgb, var(--c) 45%, var(--line));background:linear-gradient(135deg, var(--cbg), var(--surface) 70%)}
.verdict[data-state=bad]{--c:var(--bad);--cbg:var(--bad-bg)}
.verdict[data-state=warn]{--c:var(--warn);--cbg:var(--warn-bg)}
.v-icon{width:4rem;height:4rem;border-radius:50%;display:grid;place-items:center;font-size:2rem;font-weight:800;color:var(--c);border:3px solid var(--c);background:color-mix(in srgb, var(--c) 14%, transparent);animation:pop .5s var(--ease) .1s both}
@keyframes pop{from{opacity:0;transform:scale(.4)}}
.v-eyebrow{font-size:.85rem;font-weight:600;color:var(--muted);overflow-wrap:anywhere}
.v-title{font-size:clamp(1.7rem, 6vw, 2.5rem);line-height:1.1;font-weight:800;color:var(--c)}
.v-text{margin-top:.5rem;max-width:42rem}
.v-text.s{color:var(--muted);font-size:.93rem}
.v-bottom{grid-column:1 / -1;display:grid;gap:.9rem}
.counters{display:grid;grid-template-columns:repeat(auto-fit, minmax(8.5rem, 1fr));gap:.6rem;margin:0;padding:0;list-style:none}
.counter{padding:.6rem .8rem;border-radius:.8rem;background:var(--surface);border:1px solid var(--line)}
.counter b{display:block;font-size:1.6rem;line-height:1.1}
.counter span{font-size:.8rem;color:var(--muted);display:block}
.c-listed b{color:var(--bad)} .c-clean b{color:var(--ok)} .c-blocked b, .c-error b{color:var(--warn)}
.counter.zero b{color:var(--muted)}
.bar{display:flex;height:.7rem;border-radius:1rem;overflow:hidden;background:var(--surface-2);gap:2px;transform-origin:left;animation:grow .8s var(--ease) .2s both}
@keyframes grow{from{transform:scaleX(0)}}
.seg{flex:0 0 var(--w)}
.seg.s-listed{background:var(--bad)} .seg.s-clean{background:var(--ok)} .seg.s-blocked{background:var(--warn)} .seg.s-error{background:var(--muted)}
.actions{display:flex;flex-wrap:wrap;gap:.5rem}
.btn{padding:.5rem .9rem;border:1px solid var(--line);border-radius:.7rem;background:var(--surface);color:var(--text);font-size:.9rem;font-weight:600;transition:transform .15s var(--ease)}
.btn:hover{border-color:var(--accent)}
.btn:active{transform:scale(.96)}
.btn.done{border-color:var(--ok);color:var(--ok)}
.btn.primary{background:var(--accent);color:var(--on-accent);border-color:transparent}

.scope{display:flex;flex-wrap:wrap;gap:.5rem;align-items:center}
.scope h2{font-size:.85rem;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);margin-right:.4rem}
.chip{padding:.25rem .65rem;border-radius:2rem;font-size:.85rem;background:var(--surface-2);border:1px solid var(--line)}
.chip.off{color:var(--muted);border-style:dashed}
.callout{display:flex;flex-wrap:wrap;gap:.8rem 1rem;align-items:center;justify-content:space-between;border-color:color-mix(in srgb, var(--accent) 40%, var(--line))}
.callout p{flex:1 1 18rem}
.callout small{display:block;color:var(--muted);margin-top:.15rem}

h2.sec{font-size:1.15rem;margin:1.8rem 0 .6rem}
.host-head{display:flex;flex-wrap:wrap;gap:.4rem .7rem;align-items:baseline}
.host-head h3{font-size:1.1rem;overflow-wrap:anywhere}
.badge{font-size:.75rem;font-weight:700;padding:.12rem .55rem;border-radius:2rem;background:var(--surface-2);color:var(--muted);border:1px solid var(--line)}
.badge.mx{color:var(--accent)}
.rdns{margin:.6rem 0 .8rem;display:grid;gap:.2rem;font-size:.93rem}
.rdns .ok{color:var(--ok);font-weight:700} .rdns .bad{color:var(--warn);font-weight:700}
.facts{display:grid;grid-template-columns:max-content 1fr;gap:.3rem 1rem;margin:0}
.facts dt{color:var(--muted)} .facts dd{margin:0;overflow-wrap:anywhere}

.zones{display:grid;gap:.35rem}
.zone{border:1px solid var(--line);border-radius:.75rem;background:var(--surface)}
.zone[data-status=listed]{border-color:var(--bad);background:color-mix(in srgb, var(--bad-bg) 60%, var(--surface))}
.zone summary{display:grid;grid-template-columns:auto 1fr auto auto;gap:.2rem .7rem;align-items:center;padding:.6rem .8rem;cursor:pointer;list-style:none}
.zone summary::-webkit-details-marker{display:none}
.zone .name{font-weight:600;overflow-wrap:anywhere}
.zone .region{font-size:.78rem;color:var(--muted)}
.chev{width:.6rem;height:.6rem;border-right:2px solid var(--muted);border-bottom:2px solid var(--muted);transform:rotate(45deg);transition:transform .25s var(--ease);margin-right:.2rem}
details[open] > summary .chev{transform:rotate(225deg)}
.zone .body{padding:.2rem .9rem .9rem 2.35rem;display:grid;gap:.5rem;font-size:.93rem;animation:rise .3s var(--ease) both}
.zone .body p{max-width:44rem}
.zone code{font:.85rem ui-monospace, monospace;background:var(--surface-2);padding:.05rem .35rem;border-radius:.3rem}
.tag{font-size:.72rem;font-weight:700;padding:.05rem .45rem;border-radius:.3rem;border:1px solid var(--line);color:var(--muted)}
.stat{display:inline-flex;align-items:center;gap:.45rem;font-size:.85rem;font-weight:700;white-space:nowrap}
.dot{width:.65rem;height:.65rem;border-radius:50%;background:currentColor}
.s-listed{color:var(--bad)} .s-clean{color:var(--ok)} .s-blocked, .s-error{color:var(--warn)}
.s-blocked .dot{background:none;box-shadow:inset 0 0 0 2px}
.s-error .dot{border-radius:2px}
.cleans > summary{cursor:pointer;padding:.55rem .8rem;color:var(--ok);font-weight:700;display:flex;justify-content:space-between;align-items:center;list-style:none;border:1px dashed var(--line);border-radius:.75rem}
.cleans > summary::-webkit-details-marker{display:none}
.cleans .zones{margin-top:.35rem}

.skel{display:grid;gap:.8rem}
.sk{border-radius:.6rem;background:var(--surface-2);animation:fade 1s ease-in-out infinite alternate}
@keyframes fade{to{opacity:.4}}
.sk.t{height:2.4rem;width:min(22rem, 80%)} .sk.p{height:1rem} .sk.b{height:.7rem} .sk.c{height:3.6rem}
.progress{color:var(--muted);font-size:.9rem}
.error{border-color:var(--bad);background:var(--bad-bg)}
.error h2{color:var(--bad);font-size:1.2rem;margin-bottom:.3rem}

.about{margin-top:2.5rem}
.about summary{cursor:pointer;font-weight:650;padding:.7rem 0}
.about-body{display:grid;gap:.6rem;padding-bottom:1rem;max-width:46rem}
.about-body h2{font-size:1rem;margin-top:.6rem}
.about dl{margin:0;display:grid;gap:.5rem} .about dt{font-weight:700;display:flex;align-items:center;gap:.45rem} .about dd{margin:0 0 0 1.1rem;color:var(--muted)}
footer{max-width:60rem;margin:0 auto;padding:0 1rem 2.5rem;color:var(--muted);font-size:.85rem}

@media (max-width:36rem){
  .field{flex-direction:column} #go{width:100%}
  .verdict{grid-template-columns:1fr} .v-icon{width:3rem;height:3rem;font-size:1.5rem}
  .zone summary{grid-template-columns:auto 1fr auto} .zone .region{display:none} .zone .body{padding-left:.9rem}
}
@media (prefers-reduced-motion:reduce){*, ::before, ::after{animation-duration:.01ms !important;animation-iteration-count:1 !important;transition-duration:.01ms !important}}
.ts{margin-top:.5rem}

footer nav{margin-top:.4rem;font-size:.85rem}
@media (prefers-reduced-motion:reduce){
  *,::before,::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}
}
@media (forced-colors:active){
  .track{border:2px solid ButtonText}
  .thumb{background:ButtonText;forced-color-adjust:none}
  .switch input:checked + .track .thumb{background:Highlight}
}

/* Loading: indeterminate bar; with reduced motion it pulses (no movement) so the page never looks frozen. */
.bar{height:.35rem;border-radius:99px;background:var(--surface-2);overflow:hidden}
.bar::after{content:"";display:block;height:100%;width:35%;border-radius:inherit;background:var(--accent);animation:slide 1.2s ease-in-out infinite}
@keyframes slide{from{transform:translateX(-100%)}to{transform:translateX(300%)}}
@keyframes pulse{50%{opacity:.35}}
.clock{color:var(--muted);font-variant-numeric:tabular-nums}
@media (prefers-reduced-motion:reduce){
  .skel .sk,.skel .bar::after,#go:disabled .spin{animation:pulse 1.4s ease-in-out infinite !important;animation-duration:1.4s !important;animation-iteration-count:infinite !important}
  .skel .bar::after{width:100%;transform:none}
}

.v-listed{list-style:none;margin:.75rem 0 .25rem;padding:0;display:grid;gap:.4rem}
.v-listed li{padding:.55rem .75rem;border-radius:.6rem;background:var(--bad-bg);border:1px solid color-mix(in srgb,var(--bad) 35%,transparent);overflow-wrap:anywhere}
.v-listed b{color:var(--bad)} .v-who{color:var(--muted);font-size:.9rem}
.v-reason{display:block;color:var(--muted);font-size:.85rem;margin-top:.15rem}