:root{--bg:#050805;--bg2:#0a120c;--fg:#33ff66;--dim:#1f9940;--mut:#8fb99a;--amber:#ffb000;--cyan:#38e1ff;--red:#ff4d4d;--line:#143d20;--glow:0 0 6px rgba(51,255,102,.55)}
*{box-sizing:border-box}html{background:var(--bg)}
body{margin:0;background:radial-gradient(ellipse at top,#0a1a0f 0,var(--bg) 60%) fixed;color:var(--fg);font:15px/1.55 ui-monospace,"JetBrains Mono","IBM Plex Mono",SFMono-Regular,Menlo,Consolas,"Liberation Mono",monospace;min-height:100vh;display:flex;flex-direction:column}
a{color:var(--cyan);text-decoration:none}a:hover{text-decoration:underline}
.crt{pointer-events:none;position:fixed;inset:0;z-index:50;background:repeating-linear-gradient(0deg,rgba(0,0,0,.18) 0 1px,transparent 1px 3px);box-shadow:inset 0 0 120px rgba(0,0,0,.7)}
body.nofx .crt{display:none}body.nofx *{text-shadow:none!important}
h1,h2,h3{text-shadow:var(--glow);font-weight:700;margin:0 0 .6em}
.top{display:flex;align-items:center;gap:1.2rem;padding:.8rem 1.4rem;border-bottom:1px solid var(--line);background:#050805;position:sticky;top:0;z-index:20;flex-wrap:wrap}
.brand{font-size:1.4rem;font-weight:800;color:var(--fg);text-shadow:var(--glow)}.brand span{color:var(--amber)}.brand:hover{text-decoration:none}
.top nav{display:flex;gap:.2rem;flex-wrap:wrap;flex:1}.top nav a{color:var(--mut);padding:.15rem .6rem;border:1px solid transparent}
.top nav a:hover,.top nav a.on{color:var(--fg);border-color:var(--line);text-decoration:none;background:var(--bg2)}
#fx{background:none;color:var(--mut);border:1px solid var(--line);font:inherit;padding:.15rem .6rem;cursor:pointer}#fx:hover{color:var(--fg)}
main{flex:1;width:100%;max-width:1100px;margin:0 auto;padding:1.5rem 1.4rem 3rem}
footer{border-top:1px solid var(--line);padding:1rem 1.4rem;color:var(--mut);font-size:.85rem}.dim{color:var(--mut)}
.hero{display:grid;grid-template-columns:1.1fr .9fr;gap:1.5rem;align-items:center;margin-bottom:2rem}
@media(max-width:800px){.hero{grid-template-columns:1fr}}
pre.ascii{margin:0;color:var(--fg);text-shadow:var(--glow);font-size:clamp(7px,1.6vw,13px);line-height:1.1;overflow:hidden}
.term{border:1px solid var(--line);background:rgba(10,18,12,.85);box-shadow:0 0 24px rgba(51,255,102,.08)}
.term .bar{display:flex;gap:6px;align-items:center;padding:.35rem .7rem;border-bottom:1px solid var(--line);color:var(--mut);font-size:.8rem}
.term .bar i{width:10px;height:10px;border-radius:50%;background:var(--line);display:inline-block}.term .bar i:nth-child(1){background:#ff5f56}.term .bar i:nth-child(2){background:#ffbd2e}.term .bar i:nth-child(3){background:#27c93f}
.term .body{padding:.9rem 1rem;min-height:11rem;white-space:pre-wrap;word-break:break-word}
.p{color:var(--amber)}.ok{color:var(--fg)}.warn{color:var(--amber)}.bad{color:var(--red)}.info{color:var(--cyan)}
.cur{display:inline-block;width:.6em;height:1.05em;background:var(--fg);vertical-align:text-bottom;animation:blink 1s steps(1) infinite}@keyframes blink{50%{opacity:0}}
.search{display:flex;gap:.6rem;margin:1.2rem 0;align-items:center;border:1px solid var(--line);padding:.5rem .8rem;background:var(--bg2)}
.search input{flex:1;background:none;border:0;color:var(--fg);font:inherit;outline:0}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:1rem}
.card{display:block;border:1px solid var(--line);background:var(--bg2);padding:1rem;color:var(--fg);transition:.15s}
.card:hover{border-color:var(--fg);box-shadow:0 0 18px rgba(51,255,102,.2);text-decoration:none;transform:translateY(-2px)}
.card h3{font-size:1rem;margin:0 0 .4rem}.card h3 .p{margin-right:.4rem}
.card p{margin:0;color:var(--mut);font-size:.85rem}.tag{float:right;font-size:.7rem;padding:0 .4rem;border:1px solid var(--dim);color:var(--dim)}
.card.soon{opacity:.55;pointer-events:none}.card.soon .tag{border-color:var(--amber);color:var(--amber)}
form.q{display:flex;gap:.6rem;flex-wrap:wrap;margin:1rem 0}
input[type=text],select{background:var(--bg2);border:1px solid var(--line);color:var(--fg);font:inherit;padding:.5rem .7rem;outline:0}
input[type=text]{flex:1;min-width:220px}input:focus,select:focus{border-color:var(--fg);box-shadow:var(--glow)}
button.go{background:var(--fg);color:#000;border:0;font:inherit;font-weight:700;padding:.5rem 1.2rem;cursor:pointer}button.go:hover{filter:brightness(1.15)}button.go:disabled{opacity:.5}
table{border-collapse:collapse;width:100%;font-size:.9rem}th,td{text-align:left;padding:.35rem .6rem;border-bottom:1px solid var(--line);vertical-align:top;word-break:break-word}th{color:var(--amber);font-weight:600}
.out{border:1px solid var(--line);background:rgba(10,18,12,.85);padding:1rem;margin-top:1rem;overflow-x:auto}.out:empty{display:none}
.kv{display:grid;grid-template-columns:max-content 1fr;gap:.2rem 1.2rem}.kv dt{color:var(--mut)}.kv dd{margin:0;word-break:break-word}
.lead{color:var(--mut);max-width:70ch}
@media(prefers-reduced-motion:reduce){.cur{animation:none}.card{transition:none}}

html{scrollbar-color:#1f9940 #050805}
.hero{align-items:start}.term .body{font-size:.85rem}
pre.ascii{letter-spacing:0;line-height:1.05}
.logo{font-size:clamp(3rem,9vw,5.5rem);font-weight:800;line-height:1;color:var(--fg);text-shadow:0 0 14px rgba(51,255,102,.6);letter-spacing:-.04em}.logo .net{color:var(--amber);text-shadow:0 0 14px rgba(255,176,0,.5)}.logo .p{margin-right:.15em}.logo .cur{height:.8em;width:.45em;margin-left:.1em}
.cat{font-size:1rem;margin:1.8rem 0 .8rem;color:var(--fg)}
.top nav a{font-size:.9rem}

/* ---- fluid layout pass: use the full browser width ---- */
:root{--pad:clamp(.9rem,2.2vw,2.2rem)}
html{scrollbar-color:#1f9940 #050805}
body{background:var(--bg);font-size:16px}
body::before{content:"";position:fixed;inset:0;z-index:-1;background:radial-gradient(ellipse at top,#0a1a0f 0,var(--bg) 65%)}
.top{padding:.7rem var(--pad);gap:.8rem 1.2rem}
main{max-width:none;padding:1.4rem var(--pad) 3rem}
footer{display:flex;flex-wrap:wrap;gap:.3rem 1.8rem;padding:1rem var(--pad)}
.hero{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:clamp(1rem,3vw,3rem);align-items:center;margin-bottom:1.4rem}
.tag-line{margin:.5rem 0 .4rem;color:var(--fg);font-size:clamp(1.3rem,2.4vw,2rem)}
.term .body{min-height:9rem}
.search{margin:1rem 0 .6rem}.search .lbl{white-space:nowrap}
.search input{min-width:0}
.chips{display:flex;flex-wrap:wrap;gap:.5rem;margin:0 0 1.1rem}
.chips button{background:var(--bg2);color:var(--mut);border:1px solid var(--line);font:inherit;padding:.4rem .8rem;cursor:pointer}
.chips button small{color:var(--dim);margin-left:.2rem}
.chips button:hover{color:var(--fg);border-color:var(--dim)}
.chips button.on{color:#000;background:var(--fg);border-color:var(--fg)}.chips button.on small{color:#000}
.grid{grid-template-columns:repeat(auto-fill,minmax(min(100%,235px),1fr));gap:clamp(.6rem,1.2vw,1.1rem)}
.card{padding:.9rem 1rem}.card p{font-size:.88rem}
.tag{text-transform:lowercase;opacity:.8}
#menu{display:none;background:none;color:var(--mut);border:1px solid var(--line);font:inherit;padding:.5rem .9rem;cursor:pointer;min-height:44px}
#fx{min-height:44px;padding:.15rem .9rem}
.top nav{flex:1 1 auto}
.top nav a{padding:.3rem .6rem}
@media(max-width:900px){
  .hero{grid-template-columns:1fr}
  .term .body{min-height:0;font-size:.82rem}
}
@media(max-width:820px){
  .top{display:grid;grid-template-columns:1fr auto auto;align-items:center}
  #menu{display:block}
  .top nav{display:none;grid-column:1/-1;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:.4rem}
  .top.open nav{display:grid}
  .top nav a{display:flex;align-items:center;min-height:44px;border-color:var(--line);background:var(--bg2);padding:.2rem .8rem}
}
@media(max-width:600px){
  .grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .card{padding:.7rem .75rem}.card h3{font-size:.95rem}.card p{font-size:.78rem}
  .tag{display:none}
  .logo{font-size:clamp(2.6rem,15vw,4rem)}
  .chips button{padding:.55rem .8rem}
  .search .lbl{display:none}
  footer{flex-direction:column}
  th,td{padding:.3rem .4rem}
}

/* ---- polish ---- */
.hero{grid-template-columns:minmax(0,1fr) minmax(320px,760px)}
@media(max-width:900px){.hero{grid-template-columns:1fr}}
.logo .cur{vertical-align:baseline;height:.72em;margin-bottom:.02em}
footer{justify-content:space-between}
:root{--mut:#9cc4a7}
.card p{color:#9cc4a7}
.chips{position:relative}
@media(max-width:600px){
  .chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;padding-bottom:.2rem}
  .chips::-webkit-scrollbar{display:none}
  .chips button{white-space:nowrap;flex:0 0 auto}
  .term .bar{font-size:.75rem}
}

.hero{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
@media(max-width:900px){.hero{grid-template-columns:1fr}}
.term .body{font-size:clamp(.82rem,1.05vw,1.2rem);min-height:clamp(8rem,12vw,14rem)}
.logo{font-size:clamp(3rem,7vw,7.5rem)}
.search input::placeholder{color:#7fa68a;opacity:1}
@media(max-width:600px){
  .chips{-webkit-mask-image:linear-gradient(90deg,#000 88%,transparent);mask-image:linear-gradient(90deg,#000 88%,transparent)}
  .logo{font-size:clamp(2.6rem,15vw,4rem)}
}
@media(min-width:700px){footer{display:grid;grid-template-columns:1fr auto 1fr;gap:1rem}footer>span:last-child{text-align:right}footer>span:nth-child(2){text-align:center}}

/* ---- ipcalc ---- */
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,520px),1fr));gap:clamp(.8rem,1.5vw,1.4rem);align-items:start;margin-top:1rem}
.calc .cg{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,200px),1fr));gap:.7rem 1rem}
.calc label,label.inl{display:flex;flex-direction:column;gap:.25rem;color:var(--mut);font-size:.8rem}
label.inl{flex-direction:row;align-items:center;gap:.7rem;font-size:.95rem}
.calc .full{grid-column:1/-1}
.calc input,.calc select,label.inl select{width:100%;min-width:0;font-size:.95rem}
label.inl select{width:auto}
.calc input.badin{border-color:var(--red);box-shadow:0 0 6px rgba(255,77,77,.5)}
output{display:block;background:#020402;border:1px solid var(--line);padding:.45rem .6rem;color:var(--fg);font-size:.95rem;min-height:2.2rem;word-break:break-all;transition:background .2s}
output[data-copy]{cursor:copy}output[data-copy]:hover{border-color:var(--dim)}
output.copied,pre.copied{background:#0f3d1c}
output.bin{font-size:.85rem;line-height:1.7}
textarea{width:100%;background:var(--bg2);border:1px solid var(--line);color:var(--fg);font:inherit;padding:.6rem .7rem;outline:0;resize:vertical}
textarea:focus{border-color:var(--fg);box-shadow:var(--glow)}
.scroll{overflow-x:auto;margin-top:.8rem;max-height:34rem;overflow-y:auto}
pre.aggres{margin:.4rem 0;padding:.6rem;background:#020402;border:1px solid var(--line);cursor:copy;white-space:pre-wrap}

/* ipcalc fixes */
output{word-break:normal;overflow-wrap:anywhere}
.calc label>span{display:block}
.bl{display:inline-block;min-width:3.2em;margin-right:.6rem;text-align:right}
.stack{display:grid;gap:clamp(.8rem,1.5vw,1.4rem);align-content:start;min-width:0}
.cols>*{min-width:0}
label.inl{flex-wrap:wrap}
label.inl select{flex:1 1 12rem;min-width:0}
.calc input,.calc select,label.inl select{min-height:44px}
.cols .term .body{font-size:.95rem}
.cols .body p,.cols .body textarea{font-size:.9rem}
@media(min-width:1000px){.cols{grid-template-columns:minmax(0,1.1fr) minmax(0,1fr)}}

/* ---- hero artwork ---- */
.hero-art{position:relative;isolation:isolate;overflow:hidden;border:1px solid var(--line);padding:clamp(1.2rem,3vw,3rem);margin-bottom:1.4rem}
.hero-bg{position:absolute;inset:0;z-index:-2}
.hero-bg img{width:100%;height:100%;object-fit:cover;object-position:center 40%;display:block}
.hero-art::before{content:"";position:absolute;inset:0;z-index:-1;background:linear-gradient(90deg,rgba(5,8,5,.93) 0%,rgba(5,8,5,.78) 38%,rgba(5,8,5,.35) 100%),linear-gradient(0deg,rgba(5,8,5,.85),transparent 45%)}
.hero-art .term{background:rgba(5,10,6,.82);backdrop-filter:blur(3px)}
@media(max-width:900px){.hero-art::before{background:linear-gradient(0deg,rgba(5,8,5,.92),rgba(5,8,5,.7))}}

.scroll table{width:max-content;min-width:100%}.scroll td,.scroll th{white-space:nowrap}

/* hero art: stronger image, scrim only where text sits */
.hero-art::before{background:linear-gradient(90deg,rgba(5,8,5,.88) 0%,rgba(5,8,5,.55) 32%,rgba(5,8,5,.12) 62%,rgba(5,8,5,.2) 100%),linear-gradient(0deg,rgba(5,8,5,.55),transparent 40%)}
.hero-bg img{filter:brightness(1.25) saturate(1.1);object-position:center 35%}
.hero-art .term{background:rgba(4,9,5,.62);backdrop-filter:blur(2px);border-color:#1f5a30}
.hero-art .lead{color:#b4d6bd;text-shadow:0 1px 6px #000}
.hero-art .tag-line,.hero-art .logo{text-shadow:0 0 14px rgba(51,255,102,.6),0 2px 10px #000}
.lead{text-wrap:pretty}
@media(max-width:900px){.hero-art::before{background:linear-gradient(0deg,rgba(5,8,5,.9),rgba(5,8,5,.45) 55%,rgba(5,8,5,.3))}}
@media(max-width:600px){.hero-art{padding:1rem .8rem}}

.hint{margin:-.4rem 0 .8rem;font-size:.82rem}
.stack>*,.cols>*,.term,.term .body{min-width:0}
.stack{grid-template-columns:minmax(0,1fr)}
.h5grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,260px),1fr));gap:1rem 1.6rem;margin-top:.8rem}
.h5g{min-width:0}.h5g h3{margin:.2rem 0 .4rem;font-size:1rem}.h5g ul{list-style:none;margin:0;padding:0}.h5g li{padding:.1rem 0;overflow-wrap:anywhere}.h5g li b{display:inline-block;width:1.3em}
.kv code{overflow-wrap:anywhere}
.about{margin-top:2.2rem;padding-top:1rem;border-top:1px solid var(--line);max-width:80ch}.about h2{font-size:1.05rem;margin:1.2rem 0 .4rem}.about p,.about dd{color:var(--mut);line-height:1.6;margin:.3rem 0}.about dt{margin-top:.8rem;color:var(--fg)}.about dd{margin-left:0}.about .rel a{margin-right:1rem}

/* ---- bulk-input forms, mac/ptr/ports ---- */
form.q textarea{flex:1 1 320px;min-width:0;background:var(--bg2);border:1px solid var(--line);color:var(--fg);font:inherit;padding:.6rem .7rem;outline:0;resize:vertical}
form.q textarea:focus{border-color:var(--fg);box-shadow:var(--glow)}
div.q{display:flex;gap:.6rem;flex-wrap:wrap;margin:1rem 0}div.q input{flex:1;min-width:0}
code.cp{cursor:copy;background:#020402;border:1px solid var(--line);padding:.05rem .35rem;white-space:nowrap}code.cp.copied{background:#0f3d1c}
table.ports td:nth-child(1){font-weight:700}

/* ---- wrapping tables, stacked rows on phones, result headings ---- */
.wrapt{width:100%!important;min-width:0}
.wrapt td,.wrapt th{white-space:normal!important;overflow-wrap:anywhere}
#out h3{margin-top:1.4rem}#out h3:first-child{margin-top:0}
@media(max-width:600px){
  table.stackm,table.stackm tbody{display:block;width:100%}
  table.stackm thead{display:none}
  table.stackm tr{display:block;border:1px solid var(--line);margin:0 0 .7rem;padding:.35rem .6rem;background:rgba(2,4,2,.5)}
  table.stackm td{display:grid;grid-template-columns:5.2rem minmax(0,1fr);gap:.6rem;border:0;padding:.2rem 0}
  table.stackm td::before{content:attr(data-l);color:var(--amber);font-size:.8rem}
  table.stackm td[colspan]{display:block}
  table.stackm td[colspan]::before{display:none}
}

.fmts{display:flex;flex-wrap:wrap;gap:.35rem;min-width:0}
.fmts code.cp{white-space:normal;overflow-wrap:anywhere}
table.stackm td>*{min-width:0}