.network-tools-main {
  display: grid;
  gap: 1rem;
}

.network-tools-main > section {
  overflow: hidden;
}

.network-tools-hero {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(18rem, .8fr);
  min-height: 34rem;
  padding: 0 !important;
}

.network-tools-hero > div:first-child {
  display: flex;
  flex-direction: column;
  justify-content: center;
  padding: clamp(2rem, 6vw, 5rem);
  border-right: 1px solid var(--line);
}

.network-tools-hero__status {
  display: flex;
  gap: .65rem;
  align-items: center;
  margin: 1.8rem 0 .8rem;
  color: var(--muted);
  font: .62rem var(--font-mono);
  letter-spacing: .08em;
  text-transform: uppercase;
}

.network-tools-hero__status i {
  width: .52rem;
  height: .52rem;
  border-radius: 50%;
  background: #6fb586;
  box-shadow: 0 0 1rem rgba(111,181,134,.65);
  animation: network-tool-pulse 3s ease-in-out infinite;
}

.network-tools-hero__status b { font-weight: 400; }

.network-tools-hero h1 {
  max-width: 52rem;
  margin: 0;
  font-size: clamp(3.2rem, 7.4vw, 7.4rem);
  line-height: .88;
  letter-spacing: -.075em;
}

.network-tools-hero > div:first-child > p:not(.repo-path) {
  max-width: 46rem;
  margin: 1.5rem 0 0;
  color: var(--text-soft);
  font-size: clamp(1rem, 1.6vw, 1.25rem);
}

.tool-jump {
  display: grid;
  grid-template-columns: repeat(3, minmax(0,1fr));
  margin-top: 2.2rem;
  border: 1px solid var(--line);
}

.tool-jump a {
  display: flex;
  gap: .7rem;
  align-items: center;
  min-height: 3.6rem;
  padding: .8rem 1rem;
  border-right: 1px solid var(--line);
  color: var(--text-soft);
  font: .66rem var(--font-mono);
  text-decoration: none;
  text-transform: uppercase;
  transition: color 180ms ease, background-color 180ms ease, transform 180ms ease;
}

.tool-jump a:last-child { border-right: 0; }
.tool-jump a span { color: var(--blue); }
.tool-jump a b { font-weight: 400; }
.tool-jump a:hover,.tool-jump a:focus-visible { color: var(--text); background: rgba(120,188,232,.1); transform: translateY(-2px); }

.network-tools-hero__visual {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  grid-template-rows: auto auto auto;
  gap: 1rem;
  align-content: center;
  padding: clamp(2rem, 5vw, 4rem);
  background:
    linear-gradient(var(--line-soft) 1px,transparent 1px),
    linear-gradient(90deg,var(--line-soft) 1px,transparent 1px),
    radial-gradient(circle at 50% 45%,rgba(120,188,232,.14),transparent 48%),
    var(--panel-raised);
  background-size: 2.4rem 2.4rem,2.4rem 2.4rem,auto,auto;
  font-family: var(--font-mono);
}

.network-tools-hero__visual::before,
.network-tools-hero__visual::after {
  position: absolute;
  width: 3.5rem;
  height: 3.5rem;
  content: "";
  border-color: var(--blue);
  opacity: .55;
}

.network-tools-hero__visual::before { top: 1.2rem; left: 1.2rem; border-top: 1px solid; border-left: 1px solid; }
.network-tools-hero__visual::after { right: 1.2rem; bottom: 1.2rem; border-right: 1px solid; border-bottom: 1px solid; }
.network-tools-hero__visual span,.network-tools-hero__visual strong { font-size: clamp(1rem,2vw,1.35rem); font-weight: 400; }
.network-tools-hero__visual i { color: var(--yellow); font-style: normal; }
.network-tools-hero__visual b { grid-column: 1/-1; color: var(--blue); font-size: 2rem; font-weight: 400; }
.network-tools-hero__visual strong { color: #6fb586; }
.network-tools-hero__visual small { grid-column: 1/-1; overflow-wrap: anywhere; color: var(--muted); font-size: .54rem; letter-spacing: .04em; }

.network-tool {
  scroll-margin-top: 5rem;
  padding: 0 !important;
}

.network-tool__head {
  display: grid;
  grid-template-columns: 5rem minmax(0,1fr) auto;
  gap: 1.5rem;
  align-items: start;
  padding: clamp(1.4rem,3vw,2.4rem);
  border-bottom: 1px solid var(--line);
}

.network-tool__head > span,
.network-tool__head > b,
.network-tool__head p:first-child {
  color: var(--blue);
  font: .62rem var(--font-mono);
  font-weight: 400;
  letter-spacing: .08em;
  text-transform: uppercase;
}

.network-tool__head > b { color: var(--muted); }
.network-tool__head p { max-width: 52rem; margin: .55rem 0 0; color: var(--text-soft); }
.network-tool__head p:first-child { margin: 0 0 .45rem; }
.network-tool__head h2 { margin: 0; font-size: clamp(1.7rem,3vw,2.6rem); letter-spacing: -.045em; }

.network-tool__workspace {
  display: grid;
  grid-template-columns: minmax(16rem,.72fr) minmax(0,1.28fr);
  min-height: 28rem;
}

.network-tool__workspace--single { grid-template-columns: minmax(18rem,.65fr) minmax(0,1.35fr); }

.network-form {
  display: flex;
  flex-direction: column;
  gap: 1.25rem;
  padding: clamp(1.4rem,3vw,2.5rem);
  border-right: 1px solid var(--line);
  background: linear-gradient(140deg,rgba(120,188,232,.055),transparent 48%);
}

.network-form label { display: grid; gap: .5rem; }
.network-form label > span { color: var(--muted); font: .62rem var(--font-mono); letter-spacing: .07em; text-transform: uppercase; }
.network-form input,.network-form select {
  width: 100%;
  min-height: 3.5rem;
  padding: .8rem .9rem;
  border: 1px solid var(--line);
  border-radius: 0;
  outline: 0;
  background: var(--panel-raised);
  color: var(--text);
  font: .9rem var(--font-mono);
  transition: border-color 160ms ease,box-shadow 160ms ease,background-color 160ms ease;
}

.network-form input:focus,.network-form select:focus { border-color: var(--blue); box-shadow: 0 0 0 3px rgba(120,188,232,.12); }
.network-form.has-error input:focus { border-color: var(--orange); box-shadow: 0 0 0 3px rgba(214,106,74,.12); }

.field-with-prefix,.field-with-suffix,.split-field { display: grid; grid-template-columns: auto minmax(0,1fr); }
.field-with-prefix > b,.field-with-suffix > b {
  display: grid;
  min-width: 3rem;
  place-items: center;
  border: 1px solid var(--line);
  border-right: 0;
  background: rgba(120,188,232,.08);
  color: var(--blue);
  font: 1rem var(--font-mono);
  font-weight: 400;
}
.field-with-suffix { grid-template-columns: minmax(0,1fr) auto; }
.field-with-suffix > b { border-right: 1px solid var(--line); border-left: 0; }
.split-field { grid-template-columns: minmax(0,1fr) 7.5rem; }
.split-field select { border-left: 0; color: var(--blue); }

.network-form > button[type="submit"] {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 3.7rem;
  margin-top: auto;
  padding: .8rem 1rem;
  border: 1px solid var(--blue);
  background: rgba(120,188,232,.09);
  color: var(--text);
  font: .7rem var(--font-mono);
  letter-spacing: .05em;
  text-transform: uppercase;
  cursor: pointer;
  transition: color 180ms ease,background-color 180ms ease,transform 180ms ease,box-shadow 180ms ease;
}
.network-form > button[type="submit"] b { color: var(--blue); font-size: 1.1rem; font-weight: 400; }
.network-form > button[type="submit"]:hover,.network-form > button[type="submit"]:focus-visible { background: var(--blue); color: #061018; box-shadow: 0 .8rem 2rem rgba(120,188,232,.18); transform: translateY(-2px); }
.network-form > button[type="submit"]:hover b,.network-form > button[type="submit"]:focus-visible b { color: #061018; }

.network-form__error { min-height: 1.4rem; margin: -.5rem 0 0; color: var(--orange); font: .62rem var(--font-mono); }

.example-row { display: flex; flex-wrap: wrap; gap: .45rem; }
.example-row > span { width: 100%; color: var(--muted); font: .6rem var(--font-mono); text-transform: uppercase; }
.example-row button { padding: .5rem .65rem; border: 1px solid var(--line); background: var(--panel-raised); color: var(--text-soft); font: .58rem var(--font-mono); cursor: pointer; }
.example-row button:hover,.example-row button:focus-visible { border-color: var(--blue); color: var(--blue); }

.subnet-result,.address-result,.transfer-result {
  display: grid;
  grid-template-columns: repeat(2,minmax(0,1fr));
  align-content: start;
  padding: clamp(1.4rem,3vw,2.5rem);
  background:
    linear-gradient(var(--line-soft) 1px,transparent 1px),
    linear-gradient(90deg,var(--line-soft) 1px,transparent 1px);
  background-size: 2.5rem 2.5rem;
}

.subnet-result article,.address-result article,.transfer-result article {
  display: grid;
  gap: .55rem;
  min-width: 0;
  padding: 1rem;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: var(--panel-raised);
}
.subnet-result article:nth-child(2n),.transfer-result article:nth-child(2n) { border-right: 0; }
.subnet-result article:nth-last-child(-n+2),.transfer-result article:nth-last-child(-n+2) { border-bottom: 0; }
.address-result article { grid-column: 1/-1; border-right: 0; }
.address-result article:last-child { border-bottom: 0; }
.subnet-result .result-primary,.address-result .result-primary,.transfer-result .result-primary { grid-column: 1/-1; border-right: 0; }

.subnet-result span,.address-result span,.transfer-result span { color: var(--muted); font: .57rem var(--font-mono); letter-spacing: .07em; text-transform: uppercase; }
.subnet-result b,.transfer-result b { color: var(--text-soft); font: 500 clamp(.78rem,1.6vw,1.05rem) var(--font-mono); overflow-wrap: anywhere; }
.result-primary strong { color: var(--blue); font: 500 clamp(1.5rem,3.6vw,3rem)/1.1 var(--font-mono); letter-spacing: -.055em; overflow-wrap: anywhere; }
.address-result code { color: var(--text-soft); font: .73rem/1.55 var(--font-mono); overflow-wrap: anywhere; white-space: normal; }

@keyframes network-tool-pulse { 50% { opacity:.4; transform:scale(.75); } }

@media (max-width: 900px) {
  .network-tools-hero,.network-tool__workspace,.network-tool__workspace--single { grid-template-columns: 1fr; }
  .network-tools-hero > div:first-child,.network-form { border-right: 0; border-bottom: 1px solid var(--line); }
  .network-tools-hero__visual { min-height: 22rem; }
}

@media (max-width: 620px) {
  .network-tools-hero { min-height: 0; }
  .network-tools-hero > div:first-child { padding: 1.5rem 1.1rem 2rem; }
  .network-tools-hero h1 { font-size: clamp(3rem,16vw,4.6rem); }
  .network-tools-hero__visual { min-height: 17rem; padding: 2rem 1.1rem; }
  .tool-jump { grid-template-columns: 1fr; }
  .tool-jump a { border-right: 0; border-bottom: 1px solid var(--line); }
  .tool-jump a:last-child { border-bottom: 0; }
  .network-tool__head { grid-template-columns: 1fr auto; gap: .8rem; padding: 1.2rem 1rem; }
  .network-tool__head > div { grid-column: 1/-1; grid-row: 2; }
  .network-tool__head > b { text-align: right; }
  .network-form,.subnet-result,.address-result,.transfer-result { padding: 1rem; }
  .subnet-result,.transfer-result { grid-template-columns: 1fr; }
  .subnet-result article,.transfer-result article,.subnet-result article:nth-child(2n),.transfer-result article:nth-child(2n) { border-right: 0; border-bottom: 1px solid var(--line); }
  .subnet-result article:last-child,.transfer-result article:last-child { border-bottom: 0; }
  .result-primary strong { font-size: clamp(1.35rem,8vw,2rem); }
  .split-field { grid-template-columns: minmax(0,1fr) 6.4rem; }
}

@media (prefers-reduced-motion: reduce) {
  .network-tools-hero__status i { animation: none; }
  .tool-jump a,.network-form input,.network-form select,.network-form button { transition: none; }
}