:root{ color-scheme: dark; --core-diam: clamp(240px, 20vw, 320px); --core-offset-x: 30px; }
body{ margin:0; background: radial-gradient(1400px 700px at 50% -20%, #0c1c2a, #050b12 60%); font-family: ui-sans-serif, system-ui, -apple-system, Segoe UI, Roboto, Arial; }
.site-main{ padding: 24px; display:flex; justify-content:center; }

/* Koenig required */
.kg-width-wide { max-width: 1200px; margin-left:auto; margin-right:auto; }
.kg-width-full { width:100vw; margin-left:50%; transform:translateX(-50%); }

.arc-storyboard-section{ display:flex; justify-content:center; align-items:flex-start; }
.storyboard-wrap{ margin:0 auto; display:grid; place-items:center; max-width:100%; }

.arc-grid-27x27{
  --cell: min(2.2vw, 20px);
  display:grid;
  grid-template-columns: repeat(27, var(--cell));
  grid-template-rows: repeat(27, var(--cell));
  gap: clamp(6px, 0.7vw, 10px);
  margin: 0 auto;
  width: fit-content;
  place-items:center;
  position: relative;
  justify-items:center;
  align-items:center;
}

/* Core centered with animated rotating rings */
.arc-grid-27x27 .grid-core{
  grid-row: 14 / span 1;
  grid-column: 14 / span 1;
  position: relative;
  width: var(--core-diam);
  height: var(--core-diam);
}

/* Background atmospheric glow effect */
.arc-grid-27x27 .arc-core-glow{
  position: absolute;
  left: calc(50% + var(--core-offset-x));
  top: 50%;
  width: calc(var(--core-diam) * 1.2);
  height: calc(var(--core-diam) * 1.2);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle, rgba(95,228,255,0.35), transparent 70%);
  filter: blur(20px);
  z-index: 1;
}

/* Outer rotating ring - slower counter-rotation */
.arc-grid-27x27 .arc-core-ring-outer{
  position: absolute;
  left: calc(50% + var(--core-offset-x));
  top: 50%;
  width: calc(var(--core-diam) * 1.05);
  height: calc(var(--core-diam) * 1.05);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 2px dashed rgba(95,228,255,0.45);
  box-shadow: 0 0 30px rgba(47,182,255,0.7);
  opacity: 0.55;
  z-index: 2;
  animation: rotateRing 26s linear infinite reverse;
}

/* Inner rotating ring - primary rotation indicator */
.arc-grid-27x27 .arc-core-ring-inner{
  position: absolute;
  left: calc(50% + var(--core-offset-x));
  top: 50%;
  width: calc(var(--core-diam) * 0.85);
  height: calc(var(--core-diam) * 0.85);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  border: 2px dashed rgba(95,228,255,0.45);
  box-shadow: 0 0 30px rgba(47,182,255,0.7);
  z-index: 2;
  animation: rotateRing 18s linear infinite;
}

/* Central core with brain/AI visualization */
.arc-grid-27x27 .arc-core-ring{
  position: absolute;
  left: calc(50% + var(--core-offset-x));
  top: 50%;
  width: var(--core-diam);
  height: var(--core-diam);
  transform: translate(-50%, -50%);
  border-radius: 50%;
  background: radial-gradient(circle at 50% 50%,
    rgba(24,132,198,.55) 0%,
    rgba(5,16,30,.92) 72%);
  box-shadow: 0 0 36px rgba(0,188,255,.28), inset 0 0 28px rgba(0,188,255,.16);
  z-index: 3;
}
.arc-grid-27x27 .arc-core-ring::after{
  content:""; position:absolute; inset:6%; border-radius:50%;
  border:2px solid rgba(120,220,255,.35); box-shadow:0 0 14px rgba(0,180,255,.30);
}
.arc-grid-27x27 .arc-core-ring img{
  position:absolute; left:50%; top:50%; transform:translate(-50%,-50%);
  width:58%; height:auto; filter: drop-shadow(0 0 14px rgba(30,165,255,.25));
}

/* Rotation animation keyframes */
@keyframes rotateRing {
  from { transform: translate(-50%, -50%) rotate(0deg); }
  to   { transform: translate(-50%, -50%) rotate(360deg); }
}

/* Node positions (1-based grid rows/cols) */
:root{
  --ar-row: 2;  --ar-col: 14;
  --cobot-row: 6; --cobot-col: 22;
  --sibot-row: 6; --sibot-col: 6;
  --fab-row: 22; --fab-col: 6;
  --twin-row: 22; --twin-col: 22;
  --tool-row: 26; --tool-col: 14;
}

.arc-grid-27x27 .grid-ar    { grid-row: var(--ar-row) / span 3;    grid-column: var(--ar-col) / span 4; text-align:center; }
.arc-grid-27x27 .grid-sibot { grid-row: var(--sibot-row) / span 3; grid-column: var(--sibot-col) / span 4; text-align:center; }
.arc-grid-27x27 .grid-cobot { grid-row: var(--cobot-row) / span 3; grid-column: var(--cobot-col) / span 4; text-align:center; }
.arc-grid-27x27 .grid-fab   { grid-row: var(--fab-row) / span 3;   grid-column: var(--fab-col) / span 4; text-align:center; }
.arc-grid-27x27 .grid-tool  { grid-row: var(--tool-row) / span 3;  grid-column: var(--tool-col) / span 4; text-align:center; }
.arc-grid-27x27 .grid-twin  { grid-row: var(--twin-row) / span 3;  grid-column: var(--twin-col) / span 4; text-align:center; }

.arc-grid-27x27 .arc-node-card{
  width: clamp(76px, 7.4vw, 108px);
  height: clamp(76px, 7.4vw, 108px);
  border-radius: 18px;
  background: radial-gradient(circle at 35% 15%, #1b80c0 0, #04101e 65%);
  box-shadow: 0 10px 26px rgba(0,0,0,.55), 0 0 22px rgba(0,176,255,.30);
  display:flex; align-items:center; justify-content:center;
  margin: 0 auto;
}
.arc-grid-27x27 .arc-node-card img{ max-width:78%; height:auto; }
.arc-grid-27x27 .arc-node-label{ margin:6px 0 0; text-align:center; color:#cfefff; opacity:.92; font-weight:500; letter-spacing:.2px; }

/* Arrow canvas overlay */
.arc-canvas-overlay{ position:absolute; inset:0; width:100%; height:100%; pointer-events:none; z-index:2147483647; }

.arc-grid-27x27{ position:relative; }