.core-scene {
  position:relative;
  align-self:stretch;
  display:flex;
  justify-content:center;
  flex-direction:column;
  min-width:0
}

.scene-top,.scene-bottom {
  display:flex;
  justify-content:space-between;
  align-items:center;
  color:#91b0bd;
  font-size:8px;
  padding-inline:22px
}

.scene-top {
  padding-top:4px
}

.scene-top .status-dot {
  width:4px;
  height:4px;
  margin-right:5px
}

.scene-bottom {
  border-top:1px solid #264b534a;
  padding-top:13px;
  margin-inline:20px;
  padding-inline:0
}

.telemetry {
  color:var(--cyan);
  letter-spacing:3px;
  font-size:16px
}

.core-parallax {
  position:relative;
  width:100%;
  max-width:540px;
  aspect-ratio:1;
  transition:transform .35s ease-out
}

.core-art {
  width:100%;
  height:auto;
  opacity:.9
}

.core-center {
  position:absolute;
  inset:0;
  display:flex;
  align-items:center;
  justify-content:center;
  flex-direction:column;
  color:var(--cyan);
  font-family:Consolas,monospace;
  gap:7px;
  text-shadow:0 0 30px #62e9df50
}

.core-center span {
  font-size:9px;
  letter-spacing:.4em;
  margin-top:10px
}

.core-center strong {
  font-size:10px;
  font-weight:400;
  letter-spacing:.12em
}

.core-symbol {
  width:54px;
  height:54px;
  fill:none;
  stroke:var(--cyan);
  stroke-width:1;
  stroke-linecap:round;
  stroke-linejoin:round
}

.node-label {
  position:absolute;
  display:flex;
  align-items:center;
  gap:8px;
  color:#b7d4d9;
  font:8px Consolas,monospace;
  letter-spacing:.08em;
  border:1px solid #29525c;
  background:#0b1b24ee;
  padding:9px 12px;
  box-shadow:0 8px 25px #0002
}

.node-label .icon {
  width:15px;
  height:15px;
  color:var(--cyan)
}

.node-ai {
  top:18%;
  right:4%
}

.node-security {
  bottom:27%;
  left:-1%
}

.node-code {
  bottom:14%;
  right:0
}

.orbit-satellite {
  position:absolute;
  inset:15%;
  border:1px solid transparent;
  border-top-color:#62e9df70;
  border-radius:50%;
  animation:orbit 45s linear infinite;
  pointer-events:none
}

.orbit-satellite::before {
  content:"";
  height:5px;
  width:5px;
  background:var(--cyan);
  position:absolute;
  top:14%;
  left:14%;
  border-radius:50%;
  box-shadow:0 0 12px #62e9dfa0
}

.satellite-two {
  inset:6%;
  animation-direction:reverse;
  animation-duration:65s;
  border-top-color:#64a9ed60
}

.core-art { display:block; }
.core-art .core-ticks,.core-art .core-nodes { transform-origin:270px 270px; }
.core-art .core-meridian { transform-origin:270px 270px;transform:rotate(-27deg); }
.core-ready .core-ticks { animation:orbit 36s linear infinite reverse; }
.core-ready .core-nodes { animation:orbit 18s linear infinite; }
.core-ready .core-meridian { transform-origin:270px 270px;animation:core-precess 14s ease-in-out infinite alternate; }
.core-meridian:nth-of-type(2n) { animation-delay:-7s; }
.core-sweep { position:absolute;inset:10%;border-radius:50%;background:conic-gradient(from 0deg,transparent 70%,#62e9df16 95%,#62e9df66 100%);mask:radial-gradient(circle,transparent 36%,#000 37%);pointer-events:none;opacity:.6; }
.core-ready .core-sweep { animation:orbit 9s linear infinite; }
.core-pulse { position:absolute;inset:32%;border:1px solid #62e9df80;border-radius:50%;pointer-events:none; }
.core-ready .core-pulse { animation:core-pulse 4s ease-out infinite; }
.core-center { pointer-events:none; }
.core-scene .core-symbol { width:42px;height:42px; }
.core-scene[data-mode="security"] .core-art,.core-scene[data-mode="security"] .core-sweep { filter:hue-rotate(35deg); }
.core-scene[data-mode="software"] .core-art,.core-scene[data-mode="software"] .core-sweep { filter:hue-rotate(90deg); }
.core-scene[data-mode="security"] .node-security,.core-scene[data-mode="software"] .node-code,.core-scene[data-mode="ai"] .node-ai { color:var(--cyan);border-color:var(--cyan);box-shadow:0 0 22px #62e9df15; }
.core-controls { display:flex;justify-content:center;gap:7px;margin:20px 0 0; }
.core-controls button { padding:9px 14px;border:1px solid var(--line);border-radius:4px;color:var(--muted);font-size:11px;background:#0b1b24;cursor:pointer; }
.core-controls button[aria-pressed="true"] { color:var(--cyan);border-color:#62e9df80;background:#62e9df0e; }
.core-controls button:hover { color:var(--text);border-color:var(--cyan); }
.core-description { color:var(--muted);font-size:11px;line-height:1.7;text-align:center;margin:12px 18px 0;min-height:38px; }
.telemetry { display:flex;align-items:center;gap:5px;height:19px; }
.telemetry i { display:block;width:5px;height:16px;background:var(--cyan);transform:scaleY(.35); }
.core-ready .telemetry i { animation:studio-meter 1.5s ease-in-out infinite alternate; }
.telemetry i:nth-child(2n) { animation-delay:-.8s; }
.telemetry i:nth-child(3n) { animation-delay:-1.2s; }
.telemetry i:nth-child(4n) { animation-duration:2.1s; }
.offscreen .core-scene * { animation-play-state:paused!important; }
@keyframes core-precess { from { transform:rotate(-27deg) scaleX(.86); } to { transform:rotate(153deg) scaleX(1); } }
@keyframes core-pulse { 0% { transform:scale(.85);opacity:0; } 20% { opacity:.65; } 100% { transform:scale(1.7);opacity:0; } }


/* Original orbital visual, fitted to the current responsive layout. */
.core-scene{align-self:center;width:100%;max-width:560px;margin:auto;padding:24px 20px;border:1px solid #2e5764;border-radius:26px;background:radial-gradient(ellipse at 50% 40%,#17404a66,transparent 70%),#09141d;perspective:900px}
.core-parallax{margin:12px auto;transform-style:preserve-3d;touch-action:pan-y}
.scene-top,.scene-bottom{padding-inline:0;font-size:9px;letter-spacing:.08em}
.scene-bottom{margin-inline:0}.status-dot{display:inline-block;border-radius:50%;background:var(--cyan)}
.core-controls{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.core-controls button{min-height:44px;padding:9px 5px;font-size:12px;border-radius:8px}
.core-controls button[data-core-mode]{--mode-ink:#7ff4e2;--mode-fill:#0d3237;--mode-bright:#74efdc;min-height:54px;padding:12px 7px;border:1px solid var(--mode-ink);border-bottom-width:3px;border-radius:12px;background:var(--mode-fill);color:var(--mode-ink);font-size:clamp(12px,1vw,14px);font-weight:700;box-shadow:0 5px 15px #0003;transition:transform .2s ease,box-shadow .2s ease,background .2s ease}
.core-controls button[data-core-mode="security"]{--mode-ink:#a6cfff;--mode-fill:#142e50;--mode-bright:#a6cfff}
.core-controls button[data-core-mode="software"]{--mode-ink:#e2baff;--mode-fill:#332046;--mode-bright:#dfb2ff}
.core-controls button[data-core-mode][aria-pressed="true"]{background:var(--mode-bright);color:#091720;border-color:var(--mode-bright);box-shadow:0 0 0 3px #07121d,0 0 0 5px var(--mode-bright),0 8px 20px #0004;transform:translateY(-2px);text-decoration:underline;text-underline-offset:4px;text-decoration-thickness:2px}
.core-controls button[data-core-mode]:hover{transform:translateY(-4px);box-shadow:0 9px 24px #0006}
.core-controls button[data-core-mode]:focus-visible{outline:3px solid #fff;outline-offset:6px}
.core-description{font-size:12px;min-height:42px;margin:12px 4px 0}
.core-scene.offscreen *,.page-hidden .core-scene *{animation-play-state:paused!important}
.motion-paused .core-parallax{transform:none!important}
@keyframes orbit{to{transform:rotate(360deg)}}
@keyframes studio-meter{to{transform:scaleY(1)}}
@media(max-width:500px){.core-scene{padding:18px 12px}.scene-top,.scene-bottom{font-size:8px}.node-label{font-size:7px;padding:7px;gap:4px}.core-scene .core-symbol{width:30px;height:30px}.core-center span{font-size:8px;margin-top:3px}.core-center strong{font-size:8px}.core-center{gap:4px}.telemetry{gap:3px}.telemetry i{width:4px}.core-description{font-size:11px}}
@media(prefers-reduced-motion:reduce){.core-scene *{animation:none!important;transition:none!important}.core-parallax{transform:none!important}}