/* IPv6-Test — Design von handily networks; Tokens (--hn-*) und Schriften aus /hn/fonts.css */
*{box-sizing:border-box}
:root{color-scheme:dark;--ok:#4ade80;--warn:#ffb454;--bad:#f87171;--info:#93a0b8}
body{margin:0;color:var(--hn-text);font:17px/1.55 var(--hn-sans);min-height:100vh;
  background:radial-gradient(600px 320px at 85% 0,rgba(255,180,84,.07),transparent 70%),radial-gradient(500px 300px at 0 100%,rgba(74,222,128,.05),transparent 70%),var(--hn-ink);background-attachment:fixed}
::selection{background:var(--hn-amber);color:var(--hn-ink)}
a{color:var(--hn-amber);text-underline-offset:3px}
:focus-visible{outline:2px solid var(--hn-amber);outline-offset:3px;border-radius:4px}
main{max-width:880px;margin:0 auto;padding:32px 16px 24px}
.dim{color:var(--hn-text-dim)}
.small{font-size:.85rem}
code{font-family:var(--hn-mono);font-size:.92em;overflow-wrap:anywhere}
h1,h2{font-family:var(--hn-disp);font-weight:600;letter-spacing:-.01em;margin:0}
h1{font-size:clamp(1.5rem,3.4vw,2rem);line-height:1.2}
h2{font-size:.78rem;text-transform:uppercase;letter-spacing:.14em;color:var(--hn-amber);margin:36px 0 12px}

.top{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:28px}
.brand{display:flex;align-items:center;gap:12px;color:var(--hn-text);text-decoration:none;font-family:var(--hn-disp);font-weight:600;font-size:1.35rem}
.btn{font:600 .95rem var(--hn-disp);padding:10px 20px;border-radius:10px;border:0;background:var(--hn-amber);color:var(--hn-ink);cursor:pointer}
.btn:hover{background:#ffc070}
.btn:disabled{opacity:.45;cursor:default}
.btn.ghost{background:transparent;color:var(--hn-text);border:1px solid var(--hn-line)}
.btn.ghost:hover{border-color:var(--hn-amber-dim)}

.hero{display:flex;gap:24px;align-items:center;padding:24px;background:var(--hn-ink-2);border:1px solid var(--hn-line);border-radius:16px}
.score{flex:none;font-family:var(--hn-disp);font-weight:600;line-height:1;color:var(--hn-text-dim)}
.score .num{font-size:4.2rem}
.score .of{font-size:1.4rem;margin-left:2px}
.score[data-level=ok]{color:var(--ok)}
.score[data-level=warn]{color:var(--warn)}
.score[data-level=bad]{color:var(--bad)}
.hero p{margin:6px 0 0}

.addr{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:12px}
.card{display:flex;flex-direction:column;gap:2px;padding:14px 16px;background:var(--hn-ink-2);border:1px solid var(--hn-line);border-radius:14px;min-width:0}
.label{font-size:.75rem;text-transform:uppercase;letter-spacing:.12em;color:var(--hn-text-dim)}
.card code{font-size:1.02rem;color:var(--hn-amber)}

.tests{list-style:none;margin:0;padding:0;border:1px solid var(--hn-line);border-radius:14px;overflow:hidden;background:var(--hn-ink-2)}
.test{display:grid;grid-template-columns:auto 1fr auto;gap:14px;align-items:center;padding:14px 16px;border-top:1px solid var(--hn-line)}
.test:first-child{border-top:0}
.test b{display:block;font-family:var(--hn-disp);font-weight:600}
.test .what{display:block;font-size:.88rem}
.test .out{font-size:.92rem;text-align:right;color:var(--hn-text-dim)}
.st{width:12px;height:12px;border-radius:50%;background:var(--hn-line)}
.test.run .st{background:var(--hn-amber-dim);animation:pulse 1s ease-in-out infinite}
.test.ok .st{background:var(--ok)} .test.ok .out{color:var(--ok)}
.test.warn .st{background:var(--warn)} .test.warn .out{color:var(--warn)}
.test.bad .st{background:var(--bad)} .test.bad .out{color:var(--bad)}
.test.info .st,.test.skip .st{background:var(--info)}
@keyframes pulse{50%{opacity:.35}}

.notes{margin:0;padding-left:1.2em}
.notes li{margin:6px 0}
.actions{margin:28px 0 0}
.about{margin-top:28px;padding:14px 16px;border:1px solid var(--hn-line);border-radius:14px;background:var(--hn-ink-2)}
.about summary{cursor:pointer;font-family:var(--hn-disp);font-weight:600}
.about p{color:var(--hn-text-dim);font-size:.95rem}
footer{border-top:1px solid var(--hn-line);margin-top:40px;padding-top:16px;color:var(--hn-text-dim);font-size:.88rem}
footer a{color:var(--hn-text-dim);text-decoration:none}
footer a:hover{color:var(--hn-amber)}
.noscript{max-width:880px;margin:0 auto;padding:16px;color:var(--bad)}

@media (max-width:640px){
  .hero{flex-direction:column;align-items:flex-start;gap:12px}
  .addr{grid-template-columns:1fr}
  .test{grid-template-columns:auto 1fr}
  .test .out{grid-column:2;text-align:left}
}
@media (prefers-reduced-motion:reduce){.test.run .st{animation:none}}
.about h3{font-family:var(--hn-disp);font-weight:600;font-size:1rem;margin:18px 0 6px}
.points{list-style:none;margin:0;padding:0;border:1px solid var(--hn-line);border-radius:10px;overflow:hidden}
.points li{display:flex;justify-content:space-between;gap:16px;padding:8px 12px;border-top:1px solid var(--hn-line);color:var(--hn-text-dim);font-size:.95rem}
.points li:first-child{border-top:0}
.points b{font-family:var(--hn-disp);color:var(--hn-text)}