/* Compound eye. All rules scoped under .ce-* */
.ce-sc { position: relative; width: 100%; display: flex; flex-direction: column; align-items: center; gap: 8px; }
.ce-cap { font-size: 13px; color: var(--dim); text-align: center; max-width: 320px; }
.ce-hero { display: grid; place-items: center; }
.ce-hero img { width: 320px; max-width: 100%; max-height: 32vh; object-fit: contain; filter: drop-shadow(0 16px 28px rgba(123,92,253,.3)); }
.ce-hero.ce-tall img { max-height: 38vh; }
.ce-svg { width: 100%; max-width: 380px; display: block; }
.ce-lab { fill: var(--text); font: 700 13px var(--sans); }

/* one facet */
.ce-fanbox { width: 100%; max-width: 380px; display: flex; flex-direction: column; gap: 8px; }
.ce-air { fill: #1A2438; }
.ce-head { fill: #2A2140; stroke: #4A3C6A; stroke-width: 1.5; }
.ce-wall { fill: #120C1E; stroke: #3A2E55; stroke-width: 1; }
.ce-core { stroke: #3F3560; stroke-width: 4; stroke-linecap: round; }
.ce-lens { fill: rgba(200,230,255,.35); stroke: #CFE6F5; stroke-width: 1.5; }
.ce-sens { fill: rgba(252,192,80,.12); stroke: rgba(252,192,80,.6); stroke-width: 1; }
.ce-ray path { fill: none; stroke: var(--gold); stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; opacity: .9; }
.ce-ray path.ce-stop { stroke-dasharray: 4 5; opacity: .6; }
.ce-dots { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.ce-dots span { font-size: 13px; font-weight: 700; color: var(--dim); }
.ce-dots div { display: flex; gap: 6px; }
.ce-dots i { width: 22px; height: 22px; border-radius: 50%; background: var(--raised); box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); transition: background .15s; }

/* mosaic */
.ce-cv { width: min(100%, 34vh, 340px); aspect-ratio: 1; border-radius: 16px; display: block; background: #0B0A12; }

/* lenses */
.ce-rays path { fill: none; stroke: rgba(252,192,80,.8); stroke-width: 2; stroke-linejoin: round; }
.ce-lens2 { fill: rgba(200,230,255,.35); stroke: #CFE6F5; stroke-width: 1.5; }

@media (max-height: 700px) {
  .ce-svg { max-width: 330px; }
  .ce-hero img { max-height: 28vh; }
  .ce-dots i { width: 18px; height: 18px; }
}