.mt-network {
  margin: 64px 0;
  padding: 40px 0;
  border-block: 1px solid #444;
  background: #000;
  color: #fff;
}
.mt-network *, .mt-network *::before, .mt-network *::after { box-sizing: border-box; }
.mt-network-header { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 40px; align-items: start; }
.mt-network-intro { min-width: 0; }
.mt-network .mt-network-eyebrow { color: #aaa; font-size: 12px; letter-spacing: .06em; }
.mt-network h2 { margin-top: 16px; font-size: clamp(20px, 3vw, 28px); font-weight: 600; }
.mt-network .mt-network-description { margin-top: 12px; color: #ccc; }
.mt-network button {
  min-height: 44px;
  border: 1px solid #666;
  border-radius: 0;
  padding: 10px 12px;
  background: #000;
  color: #ccc;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}
.mt-network button:hover, .mt-network button:active { background: #171717; color: #fff; }
.mt-network button:focus-visible, .mt-network-node:focus-visible { outline: 2px solid #fff; outline-offset: 5px; }
.mt-network-modes { display: flex; flex-wrap: wrap; margin-top: 28px; gap: 8px; }
.mt-network-modes button[aria-pressed="true"] { background: #fff; border-color: #fff; color: #000; }
.mt-network-svg { display: block; width: 100%; max-width: 720px; height: auto; margin: 20px auto; overflow: visible; }
.mt-network-edge { stroke: #aaa; stroke-width: 1; }
.mt-network-edge-off { stroke: #333; stroke-dasharray: 4 6; }
.mt-network-node { cursor: pointer; }
.mt-network-hit { fill: transparent; }
.mt-network-ring { fill: #000; stroke: #fff; stroke-width: 2; }
.mt-network-centre { fill: #fff; }
.mt-network-node text { fill: #ccc; font: 13px 'IBM Plex Mono', monospace; pointer-events: none; }
.mt-network-node-off .mt-network-ring { stroke: #666; stroke-dasharray: 3 4; }
.mt-network-node-off .mt-network-centre { fill: #444; }
.mt-network-node-off text { fill: #888; }
.mt-network-strike { display: none; stroke: #888; stroke-width: 2; vector-effect: non-scaling-stroke; pointer-events: none; }
.mt-network-node-off .mt-network-strike { display: inline; }
.mt-network-signal { fill: #fff; animation: mt-network-transmit 9s linear infinite; }
@keyframes mt-network-transmit { from { offset-distance: 0%; } to { offset-distance: 100%; } }
.mt-network-paused .mt-network-signal { animation-play-state: paused; }
.mt-network-node-controls { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.mt-network-node-controls button[aria-pressed="false"] { border-style: dashed; color: #999; }
.mt-network-reset { margin-top: 12px; }
.mt-network-readout { min-width: 0; text-align: right; }
.mt-network-metrics { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 16px 48px; }
.mt-network-metrics dt { color: #aaa; font-size: 12px; letter-spacing: .06em; }
.mt-network-metrics dd { margin-top: 16px; font-size: clamp(20px, 3vw, 28px); }
.mt-network .mt-network-status { margin-top: 24px; font-size: 13px; font-weight: 600; }
.mt-network .mt-network-feedback { margin-top: 8px; color: #ccc; min-height: 3.4em; }
.mt-network .mt-network-note { margin-top: 20px; color: #999; font-size: 12px; line-height: 1.6; }
.mt-network .mt-network-quote { margin: 36px 0 0; font-weight: 600; font-size: clamp(20px, 2.5vw, 26px); }
.mt-network + p { margin-top: 2rem; }
@media (max-width: 800px) {
  .mt-network-header { grid-template-columns: minmax(0, 1fr); gap: 28px; }
}
@media (max-width: 600px) {
  .mt-network-node-controls { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .mt-network-modes button { flex: 1; padding-inline: 8px; font-size: 11px; }
  .mt-network-svg { width: 100%; }
  .mt-network-node text { font-size: 16px; }
  .mt-network-hit { r: 52px; }
}
@media (prefers-reduced-motion: reduce) {
  .mt-network-signal { display: none; animation: none; }
}