/* Canvas brain scene. The public page keeps its own light visual system. */
.brain-scene {
  position: relative;
  isolation: isolate;
  width: 100%;
  aspect-ratio: 620 / 540;
  overflow: hidden;
  border: 1px solid #1b4c5c;
  border-radius: 26px;
  background:
    radial-gradient(ellipse at 50% 43%, rgba(27, 99, 122, .64), transparent 60%),
    radial-gradient(ellipse at 83% 82%, rgba(17, 94, 99, .25), transparent 53%),
    linear-gradient(145deg, #092d40, #061c2c 68%, #082731);
  box-shadow: 0 20px 55px rgba(11, 46, 52, .12), inset 0 1px 0 rgba(160, 231, 235, .08);
}

.brain-scene::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 9%;
  border: 1px solid rgba(111, 197, 212, .1);
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(39, 141, 156, .1), transparent 65%);
  pointer-events: none;
}
.brain-scene::after {
  content: "";
  position: absolute;
  z-index: 3;
  inset: 0;
  border-radius: inherit;
  box-shadow: inset 0 0 45px rgba(3, 18, 29, .28);
  pointer-events: none;
}

.brain-scene .brain-fallback { display: block; width: 100%; height: 100%; }
.brain-scene .brain-fallback > svg { display: block; width: 100%; height: 100%; }
.brain-scene .brain-canvas,
.brain-scene .brain-overlay { display: none; position: absolute; inset: 0; width: 100%; height: 100%; }
.brain-scene.is-ready .brain-fallback { display: none; }
.brain-scene.is-ready .brain-canvas,
.brain-scene.is-ready .brain-overlay { display: block; }
.brain-scene .brain-canvas { z-index: 1; touch-action: pan-y; cursor: grab; }
.brain-scene.is-dragging .brain-canvas,
.brain-scene .brain-canvas.is-dragging { cursor: grabbing; }
.brain-scene .brain-canvas:focus-visible { outline: 3px solid #dfb477; outline-offset: -6px; border-radius: inherit; }
.brain-scene .brain-overlay { z-index: 2; pointer-events: none; overflow: visible; }

.brain-scene .brain-connection { stroke: #61aebe; stroke-width: 1.35; opacity: .8; filter: drop-shadow(0 0 2px rgba(90, 224, 247, .18)); }
.brain-scene .brain-label-bg { fill: #0c3242; fill-opacity: .92; stroke: #396a77; stroke-opacity: .9; filter: drop-shadow(0 3px 5px rgba(1, 16, 25, .18)); }
.brain-scene .brain-label { fill: #d3ecec; }
.brain-scene .brain-node { fill: #b7f9f4; stroke: #175063; }
.brain-scene .brain-node-halo { fill: #74e3ed; fill-opacity: .13; }
.brain-scene .brain-endpoint { fill: #79cbd3; }
.brain-scene .brain-region.is-active .brain-connection { stroke: #a0f6f6; stroke-width: 1.8; opacity: 1; filter: drop-shadow(0 0 4px rgba(102, 244, 255, .54)); }
.brain-scene .brain-region.is-active .brain-label-bg { fill: #164b59; stroke: #7ed7d4; }
.brain-scene .brain-region.is-active .brain-label { fill: #ebfff6; }
.brain-scene .brain-region.is-active .brain-node,
.brain-scene .brain-region.is-active .brain-endpoint { fill: #c5fff1; }
.brain-scene .brain-region.is-active .brain-node-halo { fill: #8cffe7; fill-opacity: .3; }
.brain-scene .brain-pulse { fill: #c0fff7; opacity: .88; filter: drop-shadow(0 0 3px #77fff1) drop-shadow(0 0 7px rgba(95, 234, 246, .65)); }
.brain-scene .brain-region.is-active .brain-pulse { fill: #fffef2; opacity: 1; }

.brain-toolbar { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px; margin-top: 17px; }
.brain-toolbar[hidden] { display: none; }
.brain-rotation-toggle,
.brain-reset { display: inline-flex; align-items: center; justify-content: center; gap: 7px; min-height: 36px; padding: 7px 12px; border: 1px solid #cddbcf; border-radius: 8px; color: #456951; background: #f8faf4; font-size: 11px; font-weight: 500; line-height: 1.5; transition: color .2s ease, background .2s ease, border-color .2s ease; }
.brain-rotation-toggle:hover,
.brain-reset:hover { color: #214f3c; border-color: #97b89e; background: #e8f0e5; }
.brain-rotation-toggle[aria-pressed="true"] { color: #214f3c; border-color: #a3c1a8; background: #e5eee0; }
.brain-rotation-toggle:disabled,
.brain-reset:disabled { cursor: default; opacity: .55; }
.brain-rotation-toggle svg,
.brain-reset svg { width: 14px; height: 14px; flex-shrink: 0; }
.brain-help { flex-basis: 100%; margin: 0 !important; color: #65756e; font-size: 12px; line-height: 1.7; text-align: center; }
.brain-stage .brain-help { margin-top: 7px !important; }
.brain-stage .brain-caption { margin-top: 10px; }

@media (max-width: 640px) {
  .brain-scene { border-radius: 20px; }
  .brain-toolbar { margin-top: 15px; gap: 7px; padding-inline: 10px; }
  .brain-rotation-toggle,
  .brain-reset { min-height: 38px; font-size: 11px; }
  .brain-help { max-width: 300px; font-size: 11px; }
}

@media (prefers-reduced-motion: reduce) {
  .brain-scene .brain-pulse { display: none; }
  .brain-scene *,
  .brain-rotation-toggle,
  .brain-reset { animation: none !important; transition: none !important; }
}