/* Nanonetes brain atlas — dark instrument aesthetic over the shared brand tokens. */

.brain-page { background: #17171B; color: var(--white); }
.brain-page .site-head .wordmark,
.brain-page .site-nav a { color: var(--white); }
.brain-page .site-nav a:hover { color: #B9B9B2; }
.brain-page .site-nav { background: transparent; }
.brain-page .nav-toggle { border-color: rgba(245,245,241,.6); }
.brain-page .nav-toggle .lines,
.brain-page .nav-toggle .lines::before,
.brain-page .nav-toggle .lines::after { background: var(--white); }

.brain-hero, .network-picker {
  max-width: 1120px;
  margin: 0 auto;
  padding: 30px 28px 8px;
}
.brain-hero h1 {
  font-size: clamp(32px, 5vw, 50px);
  font-weight: 700;
  letter-spacing: -0.025em;
  margin-bottom: 14px;
}
.brain-lede { color: #B9B9B2; max-width: 64ch; font-size: 16.5px; line-height: 1.65; }
.brain-lede strong { color: var(--white); }

.brain-stage-wrap {
  position: relative;
  max-width: 1120px;
  margin: 18px auto 10px;
  padding: 0 16px;
}
#brain-canvas {
  display: block;
  width: 100%;
  height: min(64vh, 640px);
  border-radius: 16px;
  background: radial-gradient(120% 100% at 50% 18%, #232329 0%, #17171B 58%, #101014 100%);
  border: 1px solid #2A2A31;
  touch-action: none;
  cursor: grab;
}
#brain-canvas:active { cursor: grabbing; }
#brain-canvas:focus-visible { outline: 2px solid var(--white); outline-offset: 3px; }

.brain-hint {
  text-align: center;
  font-size: 12.5px;
  color: #8B8B85;
  padding: 10px 4px 0;
}

/* info card */
.brain-info {
  position: absolute;
  top: 18px;
  right: 30px;
  width: min(300px, 74%);
  background: rgba(23,23,27,.92);
  border: 1px solid #3A3A43;
  border-radius: 14px;
  padding: 16px 18px;
  backdrop-filter: blur(6px);
  box-shadow: 0 24px 50px -22px rgba(0,0,0,.7);
}
.info-close {
  position: absolute;
  top: 8px;
  right: 10px;
  width: 34px;
  height: 34px;
  border: 0;
  background: transparent;
  color: #8B8B85;
  font-size: 22px;
  cursor: pointer;
  border-radius: 8px;
}
.info-close:hover { color: var(--white); background: rgba(255,255,255,.07); }
.info-abbrev { font-size: 12.5px; color: #8B8B85; margin-bottom: 4px; }
.info-name { font-size: 19px; font-weight: 600; line-height: 1.3; margin-bottom: 4px; padding-right: 24px; }
.info-area { font-size: 12.5px; color: #8B8B85; text-transform: uppercase; letter-spacing: .06em; margin-bottom: 10px; }
.info-fn { font-size: 14.5px; line-height: 1.6; color: #D9D9D2; }
.info-networks { font-size: 12.5px; color: #8B8B85; margin-top: 10px; }
.info-networks b { color: #B9B9B2; font-weight: 500; }

/* network picker */
.picker-label {
  font-size: 12px; font-weight: 600; color: #8B8B85;
  text-transform: uppercase; letter-spacing: .06em;
  margin-bottom: 10px;
}
.network-picker .region-chips { padding-bottom: 8px; }
.network-picker .region-chip {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  font-family: var(--sans);
  font-size: 13.5px;
  font-weight: 500;
  text-align: left;
  color: var(--white);
  border-color: #4A4A54;
  cursor: pointer;
  user-select: none;
}
.network-picker .region-chip:hover { background: rgba(255,255,255,.08); }
.network-picker .region-chip.active { background: var(--white); color: #17171B; border-color: var(--white); }
.network-picker .region-chip .dot {
  display: inline-block; width: 9px; height: 9px; border-radius: 50%;
  margin-right: 7px; vertical-align: baseline;
}
.picker-note { font-size: 13.5px; color: #8B8B85; max-width: 62ch; min-height: 20px; margin: 12px 0 40px; }
.picker-note strong { color: #B9B9B2; }

@media (max-width: 560px) {
  .brain-hero, .network-picker { padding-inline: 20px; }
  .brain-stage-wrap { padding-inline: 10px; }
  #brain-canvas { height: min(56vh, 520px); border-radius: 12px; }
  .brain-info { right: 22px; }
}

/* ---------- view controls ---------- */
.gizmo {
  position: absolute; top: 14px; right: 14px; width: 104px; height: 104px;
  z-index: 5; cursor: grab; touch-action: none;
  border-radius: 14px;
  background: rgba(16,16,20,.55);
  border: 1px solid rgba(217,179,106,.25);
  backdrop-filter: blur(4px);
}
.gizmo:active { cursor: grabbing; }
.axis-tools {
  position: absolute; right: 14px; top: 122px; z-index: 6;
  display: flex; flex-direction: column; gap: 6px;
}
.axis-tools button {
  font: 600 11.5px var(--mono, ui-monospace, monospace); letter-spacing: .1em;
  background: rgba(20,20,25,.72); color: #D9DEE6;
  border: 1px solid rgba(217,179,106,.35); border-radius: 8px;
  padding: 8px 12px; cursor: pointer; backdrop-filter: blur(4px);
  transition: all .12s ease;
}
.axis-tools button:hover { border-color: #D9B36A; color: #D9B36A; }
.zoom-wrap {
  position: absolute; left: 18px; top: 50%; transform: translateY(-50%); z-index: 6;
  height: 180px; display: flex; align-items: center;
}
.zoom-wrap input {
  appearance: none; -webkit-appearance: none;
  width: 190px; height: 2px; transform: rotate(-90deg);
  background: linear-gradient(90deg, #D9A05B, rgba(217,160,91,.18));
  border-radius: 2px; outline: none; cursor: pointer;
}
.zoom-wrap input::-webkit-slider-thumb {
  -webkit-appearance: none; width: 17px; height: 17px; border-radius: 50%;
  background: #E8B45C; border: 2px solid #1C1613; cursor: pointer;
  box-shadow: 0 0 12px rgba(232,180,92,.5);
}
.zoom-wrap input::-moz-range-thumb {
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--amber, #D9A05B); border: 2px solid #1C1613; cursor: pointer;
}
.view-tools-bottom {
  position: absolute; bottom: 30px; left: 50%; transform: translateX(-50%); z-index: 6;
  display: flex; gap: 8px;
}
.view-tools-bottom button {
  font: 600 13px "Schibsted Grotesk", system-ui, sans-serif;
  background: rgba(20,20,25,.72); color: #E4DEE6;
  border: 1px solid rgba(217,179,106,.35); border-radius: 999px;
  padding: 9px 20px; cursor: pointer; backdrop-filter: blur(4px);
  transition: all .12s ease;
}
.view-tools-bottom button:hover { border-color: #D9B36A; color: #D9B36A; }
.view-tools-bottom button.on { background: #D9B36A; color: #1C1613; border-color: #D9B36A; }
@media (max-width: 560px) {
  .gizmo { width: 74px; height: 74px; top: 10px; right: 10px; }
  .axis-tools { right: 10px; top: 96px; }
  .zoom-wrap { left: 12px; height: 150px; }
}

/* ---------- region hover tooltip ---------- */
.node-tip {
  position: absolute; z-index: 40; pointer-events: none;
  background: rgba(16,16,20,.92); color: var(--ink, #EDEDE8);
  border: 1px solid rgba(217,179,106,.45); border-radius: 8px;
  padding: 6px 11px; font-size: 12.5px; white-space: nowrap;
  font-family: "Schibsted Grotesk", system-ui, sans-serif;
  box-shadow: 0 10px 24px -12px rgba(0,0,0,.7);
}