/* Intrinsic ratios stay intact at every viewport size. */
.brain-image { height: auto; aspect-ratio: 3 / 2; object-fit: contain; }
.electric-overlay { position: absolute; pointer-events: none; mix-blend-mode: screen; }
.brain-drift > .electric-overlay { inset: 0; width: 100%; height: 100%; }
.process-core > :is(img, .electric-overlay) { height: auto; aspect-ratio: 3 / 2; object-fit: contain; }
.atlas-brain { pointer-events: auto; isolation: isolate; }
.atlas-brain > span { z-index: 3; pointer-events: none; bottom: 5%; }
.brain-viewport { position: absolute; width: 165%; height: 148%; left: -32.5%; top: -31%; border-radius: 40%; z-index: 2; touch-action: pan-y; cursor: grab; }
.brain-viewport.is-ready { cursor: grab; }
.brain-viewport.is-dragging { cursor: grabbing; }
.brain-viewport:focus-visible { outline: 1px solid #ff9b67; outline-offset: 4px; }
.atlas-fallback, .brain-webgl { position: absolute; inset: 0; width: 100%; height: 100%; }
.atlas-fallback { display: grid; place-items: center; pointer-events: none; transform-origin: 50% 50%; will-change: transform; }
.atlas-fallback > img, .atlas-fallback > .electric-overlay { width: 100%; height: 100%; object-fit: contain; aspect-ratio: 3 / 2; mix-blend-mode: screen; }
.atlas-fallback > .electric-overlay { inset: 0; }
.atlas-fallback.is-cutout > img { visibility: hidden; }
.atlas-fallback > .brain-cutout { mix-blend-mode: normal; }
.brain-webgl { display: block; opacity: 0; transition: opacity .55s ease; }
.is-ready .brain-webgl { opacity: 1; }
.is-ready .atlas-fallback { visibility: hidden; }
.knowledge-node { z-index: 4; }
.brain-reset { position: absolute; right: 20px; bottom: 16px; z-index: 5; border: 1px solid #e89f7b40; background: #22181fb0; color: #e6c4b5; padding: 6px 10px; border-radius: 20px; font-size: 10px; cursor: pointer; }
.brain-reset:hover { background: #45251d; border-color: #ff763c; }
.brain-reset[hidden] { display: none; }
.atlas-map.has-interactive-brain .atlas-hint { bottom: 24px; left: 20px; text-align: left; font-size: 8px; max-width: calc(100% - 130px); }
.portal-window { transform: none !important; will-change: auto; }
@media (max-width: 600px) {
  .brain-viewport { width: 174%; height: 154%; left: -37%; top: -32%; }
  .atlas-brain > span { bottom: 1%; font-size: 6px; }
  .brain-reset { right: 12px; bottom: 12px; font-size: 9px; padding: 5px 8px; }
  .atlas-map.has-interactive-brain .atlas-hint { bottom: 20px; left: 14px; font-size: 6px; max-width: calc(100% - 100px); }
}
@media (prefers-reduced-motion: reduce) { .brain-webgl { transition: none; } }