/* Interactive systems illustration, designed to sit inside the original KTVS visual language. */
.network-feature {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  color: #f4f8fa;
  background:
    radial-gradient(ellipse at 85% 45%, rgba(36, 76, 99, .23), transparent 48%),
    linear-gradient(120deg, #07131e 5%, #102432 65%, #081521);
  padding: clamp(86px, 8.5vw, 144px) 0;
  border-top: 1px solid rgba(255, 255, 255, .055);
  border-bottom: 1px solid rgba(255, 255, 255, .09);
}
.network-feature::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  opacity: .23;
  background: repeating-linear-gradient(90deg, transparent 0, transparent calc(25% - 1px), #557185 calc(25% - 1px), #557185 25%);
  pointer-events: none;
}
.network-feature-layout {
  display: grid;
  grid-template-columns: minmax(280px, .77fr) minmax(0, 1.23fr);
  align-items: stretch;
  column-gap: clamp(32px, 4.7vw, 80px);
}
.network-story {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 13px 0 9px;
}
.network-story-content { padding: 70px 0 40px; }
.network-story h2 {
  font: 700 clamp(42px, 3.65vw, 63px)/1.11 var(--font-head);
  letter-spacing: -.075em;
  margin: 0 0 26px;
}
.network-story h2 em { font-style: normal; color: var(--orange2); }
.network-story-content > p {
  max-width: 450px;
  font-size: clamp(14px, 1.12vw, 17px);
  line-height: 1.78;
  color: #afc0ca;
  margin: 0;
}
.network-instruction {
  color: #b9c6ce;
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 45px;
  font: 700 10px/1.5 var(--font-head);
  letter-spacing: .15em;
}
.instruction-pulse,
.network-status { width: 7px; height: 7px; border-radius: 50%; background: #ff9248; box-shadow: 0 0 0 5px rgba(255, 125, 50, .1), 0 0 12px rgba(255, 144, 65, .7); }
.instruction-pulse { animation: network-status-breathe 2s ease-in-out infinite; }
.network-story-selection {
  position: relative;
  min-height: 158px;
  border-top: 1px solid rgba(255, 255, 255, .25);
  padding-top: 21px;
  max-width: 490px;
}
.network-story-selection::before { content: ""; width: 56px; height: 2px; background: var(--orange); position: absolute; top: -1px; left: 0; }
#network-selection-id { display: block; color: var(--orange2); font: 700 10px var(--font-head); letter-spacing: .17em; margin-bottom: 12px; }
.network-story-selection h3 { font: 750 clamp(21px, 2vw, 29px)/1.3 var(--font-head); letter-spacing: -.055em; margin: 0 0 10px; }
.network-story-selection p { font-size: 13px; line-height: 1.65; color: #9eafb9; margin: 0 0 18px; max-width: 420px; }
.network-story-selection a { color: #f8f9f9; font-size: 12px; font-weight: 700; border-bottom: 1px solid #748793; padding-bottom: 6px; display: inline-flex; align-items: center; gap: 26px; }
.network-story-selection a:hover { color: var(--orange2); border-color: var(--orange2); }

.network-visual {
  position: relative;
  overflow: hidden;
  min-height: 680px;
  background:
    radial-gradient(circle at 49% 48%, rgba(230, 115, 55, .12), transparent 13%, transparent 40%),
    radial-gradient(ellipse at 42% 50%, rgba(30, 81, 104, .30), rgba(9, 26, 40, .94) 60%, #061521 100%);
  border: 1px solid rgba(164, 193, 213, .16);
  box-shadow: 0 30px 70px rgba(0, 0, 0, .23), inset 0 0 100px rgba(17, 44, 65, .25);
}
.network-visual::before {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(115, 170, 195, .055) 1px, transparent 1px),
    linear-gradient(90deg, rgba(115, 170, 195, .055) 1px, transparent 1px);
  background-size: 37px 37px;
  mask-image: radial-gradient(ellipse, #000 36%, transparent 85%);
  pointer-events: none;
}
.network-visual::after { content: ""; position: absolute; inset: 12px; border: 1px solid rgba(156, 188, 204, .065); pointer-events: none; }
.network-overlay-label, .network-overlay-footer {
  position: absolute;
  z-index: 2;
  left: 26px;
  right: 26px;
  display: flex;
  justify-content: space-between;
  gap: 16px;
  color: #89a3b2;
  font: 700 9px/1.4 var(--font-head);
  letter-spacing: .15em;
  pointer-events: none;
}
.network-overlay-label { top: 25px; }
.network-overlay-label > span:first-child { display: flex; align-items: center; gap: 13px; color: #d2dce1; }
.network-status { width: 5px; height: 5px; }
.network-overlay-footer { bottom: 25px; color: #648094; font-size: 8px; }
.network-stage { position: absolute; inset: 62px 12px 55px; }
.network-stage canvas { width: 100%; height: 100%; display: block; position: absolute; inset: 0; pointer-events: none; }
.network-hub {
  position: absolute;
  z-index: 2;
  top: 48%; left: 48%;
  transform: translate(-50%, -50%);
  width: 134px; height: 134px;
  border: 1px solid rgba(255, 137, 71, .34);
  border-radius: 50%;
  box-shadow: 0 0 0 20px rgba(255, 130, 60, .025), 0 0 0 55px rgba(255, 130, 60, .012), inset 0 0 50px rgba(255, 110, 50, .08);
  pointer-events: none;
}
.network-hub::before, .network-hub::after { content: ""; position: absolute; inset: 15px; border: 1px dashed rgba(255, 147, 75, .27); border-radius: 50%; }
.network-hub::before { animation: network-rotate 38s linear infinite; }
.network-hub::after { inset: 30px; border-style: solid; border-color: rgba(255, 148, 85, .16); }
.hub-inner { position: absolute; inset: 0; display: block; }
.hub-center { position: absolute; width: 45px; height: 45px; border-radius: 14px; top: 50%; left: 50%; transform: translate(-50%, -50%) rotate(45deg); background: linear-gradient(140deg, #f18b46, #bb5226); box-shadow: 0 0 35px rgba(255, 119, 47, .37); }
.hub-center::after { content: ""; position: absolute; inset: 13px; border: 2px solid #ffcf9d; border-radius: 4px; }
.hub-inner i { position: absolute; z-index: 2; width: 5px; height: 5px; background: #ffc58a; border-radius: 50%; box-shadow: 0 0 8px #ff9753; }
.hub-inner i:nth-of-type(1) { top: -2px; left: 50%; }
.hub-inner i:nth-of-type(2) { bottom: -2px; left: 50%; }
.hub-inner i:nth-of-type(3) { top: 50%; left: -2px; }
.hub-inner i:nth-of-type(4) { top: 50%; right: -2px; }
.network-node {
  position: absolute;
  z-index: 3;
  left: var(--nx); top: var(--ny);
  transform: translate(-50%, -50%);
  width: 112px;
  height: 92px;
  padding: 0 8px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  background: none;
  color: #c4d2dc;
  border: 1px solid transparent;
  border-radius: 6px;
  font: 800 10px/1.3 var(--font-head);
  letter-spacing: .13em;
  text-align: center;
  transition: color .2s, background .25s, border-color .25s;
}
.network-node:hover,.network-node:focus-visible { background: rgba(24, 52, 70, .83); border-color: rgba(238, 149, 92, .3); color: #fff; }
.network-node.is-selected { color: #fff; }
.node-point { display: block; width: 17px; height: 17px; background: #112637; border: 1.5px solid #86b8cf; box-shadow: 0 0 0 7px rgba(107, 171, 201, .075), 0 0 20px rgba(89, 170, 214, .14); border-radius: 50%; position: relative; transition: background .25s, box-shadow .25s, border-color .25s; }
.node-point::after { content: ""; position: absolute; inset: 5px; border-radius: 50%; background: #a8d8e9; }
.network-node.is-selected .node-point { border-color: #ffaf6d; background: #f78237; box-shadow: 0 0 0 8px rgba(251, 128, 48, .12), 0 0 32px rgba(251, 128, 48, .43); }
.network-node.is-selected .node-point::after { background: #fff4d5; }
.technical-axis { position: absolute; left: 14px; top: 50%; transform: translateY(-50%) rotate(-90deg); transform-origin: left center; white-space: nowrap; pointer-events: none; color: rgba(119, 162, 189, .25); font: 600 8px var(--font-head); letter-spacing: .3em; }
@keyframes network-rotate { to { transform: rotate(360deg); } }
@keyframes network-status-breathe { 50% { opacity: .45; box-shadow: 0 0 0 10px rgba(255, 125, 50, 0); } }
@media (max-width: 1150px) {
  .network-feature-layout { grid-template-columns: minmax(260px, .85fr) minmax(0, 1.15fr); gap: 28px; }
  .network-visual { min-height: 610px; }
  .network-hub { width: 110px; height: 110px; }
  .network-node { width: 94px; height: 80px; font-size: 9px; }
  .network-story-content { padding-top: 45px; }
}
@media (max-width: 900px) {
  .network-feature { padding: 90px 0; }
  .network-feature-layout { grid-template-columns: 1fr; gap: 40px; }
  .network-story { display: grid; grid-template-columns: 1fr 1fr; column-gap: 32px; align-items: end; }
  .network-story > .section-label { grid-column: 1 / -1; margin-bottom: 20px; }
  .network-story-content { padding: 0; }
  .network-story-selection { margin-bottom: 4px; }
  .network-story h2 { font-size: clamp(42px, 6vw, 61px); }
  .network-instruction { margin-top: 25px; }
  .network-visual { min-height: 590px; }
}
@media (max-width: 650px) {
  .network-feature { padding: 72px 0 80px; }
  .network-feature-layout { gap: 34px; }
  .network-story { display: flex; align-items: stretch; padding: 0; }
  .network-story > .section-label { margin-bottom: 29px; }
  .network-story h2 { font-size: clamp(36px, 9vw, 49px); margin-bottom: 20px; }
  .network-story-content > p { font-size: 15px; }
  .network-instruction { margin-top: 27px; }
  .network-story-selection { margin-top: 32px; padding-top: 19px; min-height: 0; }
  .network-visual { min-height: 435px; margin: 0 -8px; }
  .network-stage { inset: 49px 0 39px; }
  .network-overlay-label,.network-overlay-footer { left: 15px; right: 15px; font-size: 7px; letter-spacing: .09em; }
  .network-overlay-label { top: 17px; }
  .network-overlay-footer { bottom: 13px; }
  .network-overlay-footer span:last-child { max-width: 155px; text-align: right; }
  .network-hub { width: 75px; height: 75px; }
  .network-hub::before { inset: 8px; }
  .network-hub::after { inset: 18px; }
  .hub-center { height: 30px; width: 30px; border-radius: 8px; }
  .hub-center::after { inset: 9px; border-width: 1px; }
  .network-node { width: 78px; height: 67px; gap: 7px; font-size: 8px; letter-spacing: .06em; }
  .node-point { height: 13px; width: 13px; box-shadow: 0 0 0 5px rgba(107, 171, 201, .075); }
  .node-point::after { inset: 3px; }
  .technical-axis { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .network-hub::before, .instruction-pulse { animation: none; }
  .network-node { transition: none; }
}