/* ============ THEME: same family as the trio, h3 and http.alpagot.net ============ */
:root{
  --paper:#FAFAF7; --ink:#1A1D21; --muted:#5C6570; --accent:#E82C2A;
  --rule:#E3E1D8; --term-bg:#16191D; --term-fg:#E6EDF3; --term-dim:#7D8590;
  --term-ok:#7EE787; --box:#FFFFFF; --bad:#B42318;
  --mono:ui-monospace,'SF Mono','Cascadia Code',Menlo,Consolas,monospace;
  --sans:system-ui,-apple-system,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}
@media (prefers-color-scheme:dark){
  :root{ --paper:#131518; --ink:#E8EAED; --muted:#9AA3AD; --accent:#FF5C57;
         --rule:#2A2E33; --term-bg:#0C0E10; --box:#1B1E23; --bad:#FF8A80; }
}
/* ================================================================================= */
*{box-sizing:border-box;margin:0;padding:0;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion:reduce){html{scroll-behavior:auto;}}
body{background:var(--paper);color:var(--ink);font-family:var(--sans);
  font-size:1.0625rem;line-height:1.65;-webkit-font-smoothing:antialiased;}
.wrap{max-width:46rem;margin:0 auto;padding:0 1.25rem;}
a{color:var(--accent);text-decoration-thickness:1px;text-underline-offset:3px;}
a:hover{text-decoration-thickness:2px;}
:focus-visible{outline:3px solid var(--accent);outline-offset:3px;border-radius:2px;}
code{font-family:var(--mono);font-size:.9em;}
.skip{position:absolute;left:-9999px;top:0;background:var(--ink);color:var(--paper);
  padding:.6rem 1rem;border-radius:0 0 8px 0;font-family:var(--mono);font-size:.85rem;
  text-decoration:none;z-index:10;}
.skip:focus{left:0;}
header{padding:3.5rem 0 0;}
.wordmark{font-family:var(--mono);font-size:.95rem;color:var(--muted);}
.wordmark b{color:var(--ink);font-weight:600;}
h1{font-size:clamp(2.2rem,6.5vw,3.6rem);line-height:1.06;letter-spacing:-.03em;
  font-weight:800;margin:1rem 0 .75rem;}
h1 .go{color:var(--accent);}
.lede{color:var(--muted);max-width:36rem;margin-bottom:2.25rem;}

/* the tool card */
.conn{border:1.5px solid var(--ink);border-radius:12px;background:var(--box);
  padding:1.15rem 1.3rem;margin-bottom:1.5rem;}
.k{display:block;font-family:var(--mono);font-size:.72rem;letter-spacing:.1em;
  color:var(--muted);text-transform:uppercase;margin:.9rem 0 .45rem;}
.tabs{display:flex;gap:.4rem;flex-wrap:wrap;}
.tabs button{font:inherit;font-family:var(--mono);font-size:.8rem;font-weight:600;
  border:1.5px solid var(--ink);background:transparent;color:var(--ink);
  border-radius:999px;padding:.35rem .85rem;cursor:pointer;}
.tabs button[aria-selected="true"]{background:var(--ink);color:var(--paper);}
textarea,.ipform input{font-family:var(--mono);font-size:.85rem;color:var(--ink);}
textarea{width:100%;border:1.5px solid var(--rule);border-radius:8px;background:var(--paper);
  padding:.75rem .85rem;resize:vertical;line-height:1.5;}
textarea:focus{border-color:var(--ink);outline:none;}
.actions{display:flex;gap:.6rem;flex-wrap:wrap;margin-top:.8rem;}
button.go,.ipform button{font:inherit;font-family:var(--mono);font-size:.8rem;font-weight:600;
  background:var(--ink);color:var(--paper);border:0;border-radius:6px;
  padding:.55rem .95rem;cursor:pointer;}
button.go:hover,.ipform button:hover{background:var(--accent);}
button.ghost{font:inherit;font-family:var(--mono);font-size:.8rem;background:transparent;
  color:var(--muted);border:1.5px dashed var(--rule);border-radius:6px;padding:.5rem .9rem;cursor:pointer;}
button.ghost:hover{color:var(--ink);border-color:var(--ink);}
button[disabled]{opacity:.55;cursor:progress;}
.ipform{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;
  border:1.5px solid var(--ink);border-radius:10px;padding:.6rem .8rem;background:var(--paper);}
.ipform input{flex:1;min-width:11rem;border:0;background:transparent;outline:none;}
.note{color:var(--muted);font-size:.9rem;margin-top:.7rem;}

/* status line and results */
.status{font-family:var(--mono);font-size:.85rem;border-left:3px solid var(--accent);
  padding:.55rem .9rem;margin:0 0 1.2rem;background:var(--box);border-radius:0 8px 8px 0;}
.status.err{color:var(--bad);}
.result{margin:0 0 1.6rem;}
.result h3{font-family:var(--mono);font-size:.85rem;font-weight:600;color:var(--muted);
  margin-bottom:.45rem;word-break:break-all;}
.result h3 b{color:var(--ink);}
.result .why{font-family:var(--mono);font-size:.85rem;color:var(--bad);}
.term{background:var(--term-bg);color:var(--term-fg);font-family:var(--mono);
  font-size:.8rem;line-height:1.6;border-radius:10px;padding:1rem 1.2rem;
  overflow-x:auto;white-space:pre;box-shadow:0 12px 32px rgba(20,25,29,.18);}
.term.wrapline{white-space:pre-wrap;word-break:break-all;}
.copy{font:inherit;font-family:var(--mono);font-size:.72rem;margin:.5rem .5rem 0 0;
  background:transparent;border:1.5px solid var(--rule);color:var(--muted);
  border-radius:6px;padding:.3rem .65rem;cursor:pointer;}
.copy:hover{color:var(--ink);border-color:var(--ink);}
.copy.ok{color:var(--term-ok);border-color:var(--term-ok);}

main{padding-bottom:1rem;}
section{border-top:1px solid var(--rule);padding:2.75rem 0;}
.no{font-family:var(--mono);font-size:.8rem;color:var(--accent);
  letter-spacing:.08em;display:block;margin-bottom:.5rem;}
h2{font-size:1.55rem;letter-spacing:-.02em;line-height:1.2;margin-bottom:.9rem;font-weight:750;}
section p{margin-bottom:.9rem;max-width:40rem;}
section p:last-child{margin-bottom:0;}
strong{font-weight:650;}
footer{border-top:1px solid var(--rule);padding:2rem 0 3.5rem;color:var(--muted);font-size:.85rem;}
[hidden]{display:none !important;}