.network-section {
  margin: 0 calc(var(--page-pad) * -1);
  padding: clamp(48px,6vw,80px) var(--page-pad) clamp(64px,8vw,112px);
  border-bottom: 1px solid var(--line);
  background: #060b10;
}
.network-heading {
  margin-bottom: 28px;
  display: flex;
  align-items: end;
  justify-content: space-between;
  gap: 24px;
}
.network-heading > div > span {
  color: var(--cyan);
  font: 600 10px/1 var(--font-mono);
  letter-spacing: .12em;
}
.network-heading h2 { margin: 14px 0 8px; font-size: clamp(30px,4vw,52px); }
.network-heading p { max-width: 790px; margin: 0; color: var(--muted); font-size: 14px; }
.network-heading p strong { color: var(--ink); }
.network-actions { display: flex; gap: 8px; }
.network-actions button {
  min-height: 42px;
  padding: 0 14px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  cursor: pointer;
}
.network-actions button:hover { border-color: var(--cyan); color: var(--cyan); }
#network-title { scroll-margin-top: 112px; }
.network-tutorial {
  margin: 0 0 26px;
  padding: clamp(22px,3vw,34px);
  display: grid;
  grid-template-columns: minmax(220px,.55fr) minmax(0,1.45fr);
  column-gap: clamp(28px,4vw,58px);
  row-gap: 22px;
  border: 1px solid rgba(109,235,255,.25);
  background: linear-gradient(120deg, rgba(109,235,255,.07), transparent 44%), var(--surface);
}
.network-tutorial > div > span { color: var(--cyan); font: 650 9px/1 var(--font-mono); letter-spacing: .12em; }
.network-tutorial h3 { margin: 14px 0 9px; font-size: clamp(24px,2.6vw,36px); }
.network-tutorial > div > p { margin: 0; color: var(--muted); font-size: 13px; }
.network-tutorial ol {
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(4,minmax(0,1fr));
  list-style: none;
  border: 1px solid var(--line);
}
.network-tutorial li { min-width: 0; padding: 18px; display: grid; grid-template-columns: 26px minmax(0,1fr); gap: 10px; border-right: 1px solid var(--line); }
.network-tutorial li:last-child { border-right: 0; }
.network-tutorial li > span { color: var(--lime); font: 650 9px/1.6 var(--font-mono); }
.network-tutorial li b { display: block; margin-bottom: 8px; color: var(--ink); font-size: 13px; }
.network-tutorial li p { margin: 0; color: var(--muted); font-size: 11px; line-height: 1.6; }
.network-tutorial-mobile { grid-column: 1 / -1; margin: 0; padding-top: 18px; border-top: 1px solid var(--line); color: var(--faint); font-size: 11px; }
.network-workbench {
  display: grid;
  grid-template-columns: minmax(0,1fr);
  border: 1px solid var(--line-strong);
  box-shadow: 0 20px 100px rgba(0,0,0,.45);
}
.network-canvas-panel {
  position: relative;
  min-width: 0;
  min-height: clamp(560px,45vw,680px);
  overflow: hidden;
  border-bottom: 1px solid var(--line-strong);
  background: #071019;
}
.network-canvas { position: absolute; inset: 0; }
.network-canvas canvas { width: 100%; height: 100%; }
.network-stage-strip {
  position: absolute;
  top: 18px;
  left: 22px;
  right: 22px;
  z-index: 6;
  display: grid;
  grid-template-columns: repeat(7,minmax(0,1fr));
  gap: 7px;
  pointer-events: none;
}
.network-stage-strip > span {
  min-width: 0;
  padding: 10px 9px 9px;
  border-top: 2px solid var(--layer-color);
  background: linear-gradient(180deg, color-mix(in srgb, var(--layer-color) 10%, #071019), rgba(7,16,25,.68));
}
.network-stage-strip small,
.network-stage-strip strong,
.network-stage-strip em { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.network-stage-strip small { color: var(--layer-color); font: 600 8px/1 var(--font-mono); letter-spacing: .08em; }
.network-stage-strip strong { margin-top: 7px; color: var(--ink); font-size: 13px; }
.network-stage-strip em { margin-top: 4px; color: var(--muted); font-size: 9px; font-style: normal; }
.network-labels { position: absolute; inset: 0; z-index: 4; overflow: hidden; pointer-events: none; }
.network-node-label {
  position: absolute;
  min-width: 76px;
  padding: 6px 8px;
  display: block;
  border: 0;
  border-left: 2px solid rgba(109,235,255,.5);
  color: rgba(244,247,248,.76);
  text-align: left;
  background: rgba(5,10,15,.8);
  box-shadow: 0 4px 20px rgba(0,0,0,.25);
  transform: translate(-50%,-50%);
  transition: opacity .18s, color .18s, border-color .18s, box-shadow .18s;
  pointer-events: auto;
  cursor: pointer;
}
.network-node-label:hover,
.network-node-label:focus-visible { z-index: 7; color: var(--ink); outline: 1px solid var(--cyan); outline-offset: 2px; }
.network-node-label b { display: block; font-size: 10px; line-height: 1.2; }
.network-node-label small { display: block; margin-top: 3px; color: var(--faint); font: 500 8px/1.15 var(--font-mono); }
.network-node-label.is-selected {
  z-index: 6;
  color: var(--ink);
  border-color: var(--lime);
  background: rgba(11,18,22,.96);
  box-shadow: 0 0 26px rgba(200,255,77,.22);
}
.network-node-label.is-primary { color: var(--ink); border-color: #d9f5ff; opacity: .94; }
.network-node-label.is-incoming { color: var(--ink); border-color: #a78bfa; box-shadow: 0 0 18px rgba(167,139,250,.18); }
.network-node-label.is-outgoing { color: var(--ink); border-color: #6debff; box-shadow: 0 0 18px rgba(109,235,255,.16); }
.network-node-label.is-muted { opacity: .22; }
.network-status {
  position: absolute;
  left: 16px;
  bottom: 14px;
  z-index: 7;
  padding: 7px 9px;
  color: var(--muted);
  background: rgba(7,11,16,.82);
  border: 1px solid var(--line);
  font: 500 9px/1 var(--font-mono);
}
.network-legend {
  position: absolute;
  right: 16px;
  bottom: 14px;
  z-index: 7;
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 7px 10px;
  color: var(--muted);
  background: rgba(7,11,16,.82);
  border: 1px solid var(--line);
  font: 500 9px/1 var(--font-mono);
}
.network-legend span { display: inline-flex; align-items: center; gap: 6px; }
.network-legend span::before { width: 16px; height: 2px; content: ''; background: currentColor; }
.network-legend .is-main { color: #d9f5ff; }
.network-legend .is-incoming { color: #a78bfa; }
.network-legend .is-outgoing { color: #6debff; }
.network-inspector {
  min-width: 0;
  padding: clamp(28px,4vw,52px);
  display: grid;
  grid-template-columns: minmax(220px,.8fr) minmax(300px,1.25fr) minmax(240px,.9fr);
  grid-template-areas:
    "route route route"
    "id questions output"
    "title questions output"
    "short questions output"
    "description questions output";
  column-gap: clamp(28px,4vw,64px);
  row-gap: 0;
  align-items: start;
  background: radial-gradient(circle at 100% 0, rgba(167,139,250,.08), transparent 30%), var(--surface);
}
.inspector-route {
  grid-area: route;
  margin-bottom: clamp(28px,3vw,42px);
  padding-bottom: clamp(24px,3vw,36px);
  display: grid;
  grid-template-columns: minmax(0,1fr) auto minmax(130px,.45fr) auto minmax(0,1fr);
  align-items: center;
  gap: clamp(12px,2vw,28px);
  border-bottom: 1px solid var(--line);
}
.inspector-route > div,
.inspector-route > strong { min-width: 0; }
.inspector-route small { display: block; margin-bottom: 9px; color: var(--faint); font: 600 9px/1 var(--font-mono); letter-spacing: .08em; }
.inspector-route div span {
  margin: 0 5px 5px 0;
  padding: 7px 9px;
  display: inline-block;
  color: var(--muted);
  border: 1px solid var(--line);
  font-size: 12px;
}
.inspector-route > strong { padding: 13px 14px; color: var(--lime); text-align: center; border: 1px solid rgba(200,255,77,.42); background: rgba(200,255,77,.05); }
.inspector-route > strong small { color: var(--lime); opacity: .72; }
.inspector-route > i { color: var(--faint); font-style: normal; }
.inspector-id { grid-area: id; margin-bottom: 28px; color: var(--cyan); font: 600 9px/1 var(--font-mono); letter-spacing: .1em; }
.network-inspector h3 { grid-area: title; margin-bottom: 10px; font-size: 32px; }
.inspector-short { grid-area: short; color: var(--lime) !important; font-weight: 700; }
.network-inspector > p:not(.inspector-short) { grid-area: description; margin-bottom: 0; color: var(--muted); font-size: 14px; }
.network-inspector section { margin: 0; padding-left: clamp(24px,3vw,44px); border-left: 1px solid var(--line); }
.network-inspector section:first-of-type { grid-area: questions; }
.network-inspector .inspector-output { grid-area: output; }
.network-inspector h4 { margin-bottom: 14px; color: var(--faint); font: 600 10px/1 var(--font-mono); letter-spacing: .08em; }
.network-inspector ol { margin: 0; padding-left: 20px; }
.network-inspector li { margin-bottom: 10px; color: var(--muted); font-size: 13px; }
.inspector-output p { margin: 0; color: var(--ink); font-weight: 700; }
.network-fallback { margin-top: 16px; border: 1px solid var(--line-strong); }
.accessible-network { padding: 24px; }
.accessible-network > p { color: var(--muted); font-size: 13px; }
.accessible-network section { padding: 20px 0; border-top: 1px solid var(--line); }
.accessible-network h3 { display: flex; align-items: center; gap: 12px; font-size: 18px; }
.accessible-network h3 span { color: var(--layer-color); font: 600 10px/1 var(--font-mono); }
.accessible-network section > div { display: grid; grid-template-columns: repeat(3,minmax(0,1fr)); gap: 8px; }
.accessible-network button { min-height: 70px; padding: 12px; text-align: left; border: 1px solid var(--line); background: var(--surface); cursor: pointer; }
.accessible-network button b,
.accessible-network button small { display: block; }
.accessible-network button small { margin-top: 4px; color: var(--muted); font-size: 11px; }
.accessible-network button:hover,
.accessible-network button.is-selected { border-color: var(--layer-color); box-shadow: inset 3px 0 0 var(--layer-color); }
.network-canvas-panel.has-webgl-error .network-canvas,
.network-canvas-panel.has-webgl-error .network-labels,
.network-canvas-panel.has-webgl-error .network-legend { display: none; }
.network-canvas-panel.has-webgl-error { min-height: 240px; }