/* DeeNet WebKit как управляющее ядро, передающее сигнал инструментам. */
.webkit-orbit {
  height: 340px;
  position: relative;
  overflow: visible;
  isolation: isolate;
  background-image: linear-gradient(rgba(170, 142, 255, 0.08) 1px, transparent 1px), linear-gradient(90deg, rgba(100, 210, 255, 0.06) 1px, transparent 1px);
  background-size: 24px 24px;
}

.webkit-orbit::before,
.webkit-orbit::after {
  content: "";
  position: absolute;
  z-index: 0;
  pointer-events: none;
}

.webkit-orbit::before {
  inset: 38px 8%;
  border-radius: 50%;
  background: radial-gradient(circle at 38% 42%, rgba(101, 202, 255, 0.28), rgba(121, 79, 255, 0.22) 42%, rgba(208, 93, 255, 0.07) 58%, transparent 72%);
  filter: blur(13px);
}

.webkit-orbit::after {
  inset: 17% 11%;
  border: 1px solid rgba(180, 134, 255, 0.24);
  border-radius: 38% 62% 59% 41% / 46% 41% 59% 54%;
  box-shadow: 0 0 48px rgba(101, 202, 255, 0.16), 0 0 72px rgba(168, 82, 255, 0.16), inset 0 0 45px rgba(154, 124, 255, 0.12);
  transform: rotate(-11deg);
}

.signal-canvas {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  pointer-events: none;
  mix-blend-mode: screen;
  filter: drop-shadow(0 0 7px rgba(101, 202, 255, 0.65));
}

.orbit-core {
  inset: 50% auto auto 50%;
  width: 152px;
  height: 152px;
  transform: translate(-50%, -50%) rotate(-7deg);
  z-index: 3;
  background: linear-gradient(145deg, #2776bd 0%, #352081 48%, #190b43 100%);
  box-shadow: 0 0 30px rgba(101, 202, 255, 0.55), 0 0 84px rgba(155, 73, 255, 0.55), inset 0 0 0 1px rgba(220, 198, 255, 0.46);
}

.orbit-core::after {
  content: "";
  position: absolute;
  inset: -17px;
  border: 1px solid rgba(101, 202, 255, 0.28);
  border-radius: 35px;
  opacity: 0;
  animation: core-pulse 5.4s ease-out infinite;
}

.tool-node {
  position: absolute;
  z-index: 4;
  display: grid;
  min-width: 76px;
  padding: 8px 10px;
  border: 1px solid rgba(125, 211, 255, 0.42);
  border-radius: 7px 13px 7px 13px;
  background: linear-gradient(135deg, #153f72, #091735 76%);
  box-shadow: 0 0 0 1px rgba(154, 124, 255, 0.08), 0 12px 27px rgba(0, 0, 0, 0.32), inset 0 1px 0 rgba(204, 242, 255, 0.16);
  backdrop-filter: none;
  transform-origin: center;
  animation: node-breathe 4.8s ease-in-out infinite;
  transition: border-color 0.25s ease, box-shadow 0.25s ease, background 0.25s ease;
}

.tool-node::before { content: ""; position: absolute; top: -1px; left: 11px; width: 24px; height: 2px; background: var(--wk-cyan); box-shadow: 0 0 10px var(--wk-cyan); }
.tool-node b { color: var(--wk-cyan); font-size: 10px; letter-spacing: 0.75px; text-shadow: 0 0 10px rgba(101, 202, 255, 0.7); }
.tool-node small { color: var(--wk-muted); font-size: 9px; margin-top: 2px; }
.tool-node.is-active { border-color: #fffde8; animation: node-breathe 4.8s ease-in-out infinite, node-flash 0.56s ease-in-out infinite alternate; }
.tool-node.is-active::after { content: "signal"; position: absolute; top: -9px; right: -8px; padding: 3px 5px; border: 1px solid rgba(255, 253, 232, 0.9); border-radius: 3px; color: #071126; font-size: 7px; font-weight: 900; letter-spacing: 0.5px; }

.node-webp { top: 8%; right: 10%; }
.node-code { top: 31%; left: 5%; animation-delay: -0.9s; }
.node-dns { bottom: 12%; left: 9%; animation-delay: -2s; }
.node-json { bottom: 8%; right: 34%; animation-delay: -3.2s; }
.node-seo { top: 5%; left: 38%; animation-delay: -1.5s; }
.node-qr { top: 43%; right: 5%; animation-delay: -2.8s; }
.node-dns b, .node-json b { color: #c8b9ff; }
.node-seo b { color: #9de4ff; }
.node-dns, .node-json, .node-qr { border-color: rgba(193, 150, 255, 0.68); background: linear-gradient(135deg, #4a2789, #110f44 88%); }
.node-dns::before, .node-json::before, .node-qr::before { background: #c39aff; box-shadow: 0 0 11px #b16dff; }
.node-dns b, .node-json b, .node-qr b { color: #d7c5ff; text-shadow: 0 0 11px rgba(193, 150, 255, 0.8); }

.node-webp.is-active { background: linear-gradient(135deg, #efff49, #9dbd12 58%, #314900); box-shadow: 0 0 0 2px #f8ffb8, 0 0 22px #dfff27, 0 0 64px rgba(214, 255, 35, 0.96); }
.node-webp.is-active::before, .node-webp.is-active::after { background: #efff49; box-shadow: 0 0 16px #efff49; }
.node-code.is-active { background: linear-gradient(135deg, #ffcf4b, #f36d20 57%, #662006); box-shadow: 0 0 0 2px #ffe1a3, 0 0 23px #ff9a2e, 0 0 66px rgba(255, 105, 35, 0.95); }
.node-code.is-active::before, .node-code.is-active::after { background: #ffae37; box-shadow: 0 0 16px #ff8a24; }
.node-dns.is-active { background: linear-gradient(135deg, #ff6583, #e92c48 55%, #5d0016); box-shadow: 0 0 0 2px #ffc0cd, 0 0 23px #ff3e61, 0 0 66px rgba(255, 43, 87, 0.94); }
.node-dns.is-active::before, .node-dns.is-active::after { background: #ff5071; box-shadow: 0 0 16px #ff3159; }
.node-json.is-active { background: linear-gradient(135deg, #fa6cff, #b52fdb 55%, #47005f); box-shadow: 0 0 0 2px #ffc4ff, 0 0 23px #e248ff, 0 0 66px rgba(212, 45, 255, 0.94); }
.node-json.is-active::before, .node-json.is-active::after { background: #f16bff; box-shadow: 0 0 16px #df3cff; }
.node-seo.is-active { background: linear-gradient(135deg, #83ffe0, #18bca5 56%, #004a52); box-shadow: 0 0 0 2px #c7fff1, 0 0 23px #4fffd7, 0 0 66px rgba(45, 255, 213, 0.88); }
.node-seo.is-active::before, .node-seo.is-active::after { background: #62ffdc; box-shadow: 0 0 16px #38ffd3; }
.node-qr.is-active { background: linear-gradient(135deg, #ffe45a, #f08c1c 57%, #673500); box-shadow: 0 0 0 2px #fff0ac, 0 0 23px #ffc52d, 0 0 66px rgba(255, 175, 24, 0.95); }
.node-qr.is-active::before, .node-qr.is-active::after { background: #ffd84d; box-shadow: 0 0 16px #ffbb24; }

@keyframes node-breathe { 50% { translate: 0 -6px; } }
@keyframes node-flash { from { filter: brightness(1.12) saturate(1.2); } to { filter: brightness(1.48) saturate(1.65); } }
@keyframes core-pulse { 0%, 72% { opacity: 0; transform: scale(0.82); } 82% { opacity: 0.75; } 100% { opacity: 0; transform: scale(1.2); } }

@media (prefers-reduced-motion: reduce) {
  .tool-node, .orbit-core::after { animation: none; }
}

@media (max-width: 800px) {
  .webkit-orbit { height: 280px; }
  .orbit-core { width: 130px; height: 130px; }
  .tool-node { min-width: 61px; padding: 6px 8px; }
  .node-webp { top: 7%; right: 5%; }
  .node-code { top: 28%; left: 3%; }
  .node-dns { bottom: 8%; left: 4%; }
  .node-json { bottom: 4%; right: 27%; }
  .node-seo { top: 3%; left: 35%; }
  .node-qr { top: 48%; right: 3%; }
}