/* Iframe body is always transparent — the parent hero section provides
     the background (electric blue in light, deep navy in dark). That way
     the hero gradient overlays and orbs show through correctly and the
     iframe never renders as a differently-shaded square. */
  html, body { margin: 0; padding: 0; background: transparent; overflow: hidden; }
  .stage { min-height: 100vh; display: flex; flex-direction: column; align-items: center; justify-content: center; padding: 12px; box-sizing: border-box; }
  .scene { width: 100%; max-width: 900px; perspective: 750px; perspective-origin: 50% 50%; position: relative; }
  .stage svg { width: 100%; height: auto; display: block; transform-origin: 50% 50%; transform-style: preserve-3d; }
  .ink  { stroke: #FFFFFF; fill: none; stroke-linecap: round; stroke-linejoin: round; }
  .w-1  { stroke-width: 1.4; }
  .w-p  { stroke-width: 1.0; }
  .w-s  { stroke-width: 0.75; }
  .w-f  { stroke-width: 0.55; }

  /* Background-matching fill/stroke — used for label backdrops and the
     small rects that mask spokes beneath building/device icons so they
     read cleanly. The color MUST match the hero background exactly
     in each mode so these shapes are invisible. */
  .bg-fill   { fill: #2563EB; }        /* light mode — matches hero electric blue */
  .bg-stroke { stroke: #2563EB; }
  .fill-white { fill: #2563EB; stroke: #FFFFFF; stroke-linecap: round; stroke-linejoin: round; }

  /* Packet dot base style */
  .packet { filter: drop-shadow(0 0 2px rgba(255,255,255,0.35)); }

  /* Dark mode: masks/labels must match the hero's deep-navy background
     so they blend invisibly. Skipped when html[data-theme="light"] is
     set (manual override from parent's theme toggle via postMessage). */
  @media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) .fill-white { fill: #1E3A6E; }
    html:not([data-theme="light"]) .bg-fill    { fill: #1E3A6E; }
    html:not([data-theme="light"]) .bg-stroke  { stroke: #1E3A6E; }
  }
  /* Manual overrides set via postMessage from parent on theme toggle */
  html[data-theme="dark"] .fill-white { fill: #1E3A6E; }
  html[data-theme="dark"] .bg-fill    { fill: #1E3A6E; }
  html[data-theme="dark"] .bg-stroke  { stroke: #1E3A6E; }
  html[data-theme="light"] .fill-white { fill: #2563EB; }
  html[data-theme="light"] .bg-fill    { fill: #2563EB; }
  html[data-theme="light"] .bg-stroke  { stroke: #2563EB; }