/* Version 33 — an anatomical focus layer around the original pearl brain.
   Scope: the progressively enhanced brain stage and its expanded dialog. */
.brainStage[data-focus-ready="true"] {
  position: relative;
  top: auto;
  width: 100%;
  min-width: 0;
  min-height: 0;
  padding: 0;
  justify-content: flex-start;
  container-type: inline-size;
}
.brainStage[data-focus-ready="true"]::before { inset: 0; }
.brainStage[data-focus-ready="true"] > .brainStage__art,
.brainStage[data-focus-ready="true"] > .brainStage__label { display: none; }
.brainStage[data-focus-ready="true"] > .brainStage__orbit { display: none; }
.brainStage[data-focus-ready="true"] > .brainStage__symbol { top: 7%; opacity: .045; }
.brainStage[data-focus-ready="true"] > .brainStage__canvas { opacity: .45; }

.bfWorkbench {
  --bf-edge: #355466;
  --bf-muted: #b6cbd6;
  --bf-bright: #b4f0e9;
  position: relative;
  z-index: 1;
  display: grid;
  gap: 14px;
  width: 100%;
  min-width: 0;
  color: #edf7fb;
  text-align: left;
}
.bfWorkbench > * { min-width: 0; }
.bfViewport > .brainStage__orbit { top: 26%; left: 4%; width: 92%; height: auto; aspect-ratio: 1.8; opacity: .1; z-index: 1; }
.bfWorkbench :is(button, select, input) { font: inherit; }
.bfWorkbench button,
.bfDialogBar button {
  min-height: 44px;
  border: 1px solid var(--bf-edge, #355466);
  border-radius: 9px;
  background: #0c202e;
  color: #dcecf3;
  padding: 10px 13px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.4;
  cursor: pointer;
  transition: background-color .2s, border-color .2s, box-shadow .2s;
}
.bfWorkbench button:disabled { opacity: .42; cursor: default; }
.bfWorkbench button[aria-pressed="true"] {
  color: #d4fff8;
  border-color: #83d4ce;
  background: #173d48;
  box-shadow: inset 0 1px rgba(219,255,250,.09);
}
.bfWorkbench :is(button, select, input, a):focus-visible,
.bfViewport:focus-visible,
.bfDialogBar button:focus-visible {
  outline: 3px solid #b8f8f0;
  outline-offset: 4px;
}
.bfWorkbench select {
  display: block;
  width: 100%;
  min-width: 0;
  min-height: 46px;
  margin-top: 7px;
  padding: 10px 34px 10px 12px;
  border: 1px solid var(--bf-edge);
  border-radius: 8px;
  background-color: #0c202e;
  color: #f0f8fc;
  font-size: 14px;
  line-height: 1.5;
  color-scheme: dark;
}
.bfWorkbench label { font-size: 12px; line-height: 1.5; color: var(--bf-muted); }

.bfHeader {
  grid-area: auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 3px 0 1px;
}
.bfHeader > div { min-width: 0; }
.bfHeader p,
.bfHeader .bfEyebrow,
.bfHeader .brainCaption {
  display: block;
  margin: 0 0 6px;
  color: #95d6d4;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: .16em;
  text-transform: uppercase;
}
.bfHeader :is(h2,h3) {
  margin: 0;
  color: #f1f9fd;
  font-size: clamp(19px,1.8vw,24px);
  font-weight: 500;
  line-height: 1.2;
  letter-spacing: -.025em;
}
.bfHeader button { flex: 0 0 auto; }
.bfExpandedTopic { display: none; }
.bfBrowse {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  padding: 4px;
  border: 1px solid #263f50;
  border-radius: 12px;
  background: rgba(3,14,24,.68);
}
.bfBrowse button { border-color: transparent; background: transparent; padding-inline: 8px; }
.bfBrowse button[aria-pressed="true"] { border-color: #456d78; background: #173541; }
.bfRegionChooser label,
.bfExpandedTopic label { display: block; }

/* The stage stays geometrically stable as areas change; zoom belongs to SVG. */
.bfViewport {
  position: relative;
  width: 100%;
  min-width: 0;
  min-height: 240px;
  aspect-ratio: 3 / 2;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid #2c4e60;
  border-radius: 16px;
  background: radial-gradient(ellipse at 54% 42%,#142d3b 0%,#091b29 48%,#05121f 90%);
  box-shadow: 0 24px 65px -40px #000, inset 0 1px rgba(208,249,255,.08);
  touch-action: pan-y pinch-zoom;
}
.bfViewport::after {
  content: "";
  position: absolute;
  inset: 11px;
  border: 1px solid rgba(143,206,216,.075);
  border-radius: 8px;
  pointer-events: none;
}
.bfViewport[data-zoomed="true"] { cursor: grab; touch-action: none; }
.bfViewport[data-dragging="true"] { cursor: grabbing; }
.bfMap { display: block; width: 100%; height: 100%; overflow: hidden; user-select: none; -webkit-user-select: none; }
.bfBaseImage { opacity: 1; transition: opacity .35s; pointer-events: none; }
.bfMap[data-isolated="true"] .bfBaseImage { opacity: .12; }
.bfIsolatedImage { pointer-events: none; }
.bfStructureModel { pointer-events:none; filter:drop-shadow(0 0 13px rgba(166,239,240,.2)); }
.bfMap[data-structure="true"] .bfRegion[data-selected="true"] { fill-opacity:0; stroke-opacity:0; }
.bfRegion {
  fill: var(--region-color, #94e5e2);
  fill-opacity: .14;
  stroke: var(--region-color, #94e5e2);
  stroke-width: 1.25;
  stroke-opacity: .78;
  vector-effect: non-scaling-stroke;
  cursor: pointer;
  transition: fill-opacity .22s, stroke-opacity .22s, opacity .22s;
}
.bfRegion[data-active="false"] { opacity: 0; pointer-events: none; }
.bfRegion[data-active="true"] { opacity: 1; }
.bfMap[data-isolated="true"] .bfRegion:not([data-selected="true"]) { opacity: 0; pointer-events: none; }
.bfRegion[data-selected="true"] { fill-opacity: .25; stroke-opacity: 1; stroke-width: 2; }
.bfRegion[data-kind="deep"] { stroke-dasharray: 4 4; fill-opacity: .22; }
.bfRegion[data-kind="deep"][data-selected="true"] { fill-opacity: .48; stroke-width: 2.5; }
.bfRegion:focus-visible { outline: none; stroke: #fff; stroke-width: 3; stroke-opacity: 1; }
.bfDeepFill { fill: var(--region-color, #9fe7e5); fill-opacity: .18; pointer-events: none; }
.bfPathways { pointer-events: none; opacity: .62; }
.bfPathways path {
  fill: none;
  stroke: var(--region-color, #a2dedf);
  stroke-width: 1.2;
  stroke-opacity: .7;
  stroke-linecap: round;
  stroke-dasharray: 4 9;
  vector-effect: non-scaling-stroke;
}
html[data-motion="running"] .brainStage[data-visible="true"] .bfPathways path { animation: bf-pathway-flow 7s linear infinite; }
@keyframes bf-pathway-flow { to { stroke-dashoffset: -52; } }
.bfViewportBadge {
  position: absolute;
  top: 15px;
  left: 16px;
  z-index: 2;
  max-width: calc(100% - 32px);
  padding: 8px 11px;
  border: 1px solid rgba(164,223,229,.17);
  border-radius: 7px;
  background: rgba(3,17,28,.83);
  color: #e5f5fa;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.4;
  pointer-events: none;
}
.bfViewportBadge small { display: block; margin-top: 3px; color: #b3cbd7; font-size: 10px; font-weight: 400; }
.bfMapNote {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: absolute;
  inset: auto 16px 13px;
  z-index: 2;
  margin: 0;
  color: #b1c8d2 !important;
  font-size: 10px;
  font-weight: 500;
  line-height: 1.5;
  letter-spacing: .04em;
  text-align: center;
  pointer-events: none;
  text-shadow: 0 1px 5px #05121f;
}

.bfToolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 1px 0;
}
.bfToolbar button { min-width: 44px; padding-inline: 11px; }
.bfToolbar button[data-bf-in],
.bfToolbar button[data-bf-out] { font-size: 20px; font-weight: 400; }
.bfZoom { display: flex; align-items: center; flex: 1 1 80px; gap: 8px; min-width: 64px; }
.bfZoom input[type="range"] {
  display: block;
  width: 100%;
  min-width: 0;
  height: 44px;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  accent-color: #a4e8df;
  cursor: pointer;
}
.bfZoomValue { min-width: 37px; color: #d5e9f0; font-size: 12px; font-variant-numeric: tabular-nums; text-align: center; }
.bfToolbar .bfIsolate { margin-left: auto; font-size: 12px; }
.bfRelated { display: flex; gap: 7px; flex-wrap: wrap; }
.bfRelated button { display: inline-flex; align-items: center; gap: 8px; padding: 9px 11px; font-size: 12px; text-align: left; }
.bfRegionSwatch { flex: 0 0 7px; width: 7px; height: 7px; border-radius: 50%; background: var(--region-color,#a2e9e1); box-shadow: 0 0 10px color-mix(in srgb,var(--region-color,#a2e9e1) 25%,transparent); }
.bfRelated button[aria-pressed="true"] .bfRegionSwatch { box-shadow: 0 0 0 3px rgba(201,252,244,.12); }
.bfDetail {
  padding: 21px;
  border: 1px solid #2b475a;
  border-radius: 13px;
  background: linear-gradient(140deg,rgba(19,43,58,.94),rgba(8,23,38,.97));
  box-shadow: inset 0 1px rgba(209,242,251,.05);
}
.bfDetail .bfDetailEyebrow {
  margin: 0 0 8px;
  color: #a4dedb;
  font-size: 10px;
  font-weight: 600;
  line-height: 1.5;
  letter-spacing: .12em;
  text-transform: uppercase;
}
.bfDetail h3 { margin: 0 0 11px; color: #f1f9fc; font-size: 24px; font-weight: 500; line-height: 1.2; letter-spacing: -.03em; }
.bfDetail p { margin: 11px 0 0; color: #c4d7e3; font-size: 14px; line-height: 1.75; }
.bfDetail .bfDescription { font-size: 15px; color: #d6e7ef; }
.bfDetail .bfConnection { padding-top: 12px; border-top: 1px solid #2f4b5c; }
.bfDetail .bfDetailNote { color: #b3c7d3; font-size: 12px; line-height: 1.7; }
.bfSources { display: flex; flex-wrap: wrap; gap: 0 15px; margin-top: 9px; }
.bfSources > span { flex-basis: 100%; margin-top: 8px; color: #a8c3ce; font-size: 10px; line-height: 1.5; text-transform: uppercase; letter-spacing: .08em; }
.bfSources a { display: inline-flex; align-items: center; min-height: 44px; padding-block: 7px; color: #a9e7e1; font-size: 12px; line-height: 1.5; text-decoration-thickness: 1px; }
.bfHint { margin: -1px 0 0 !important; color: #adc4d1 !important; font-size: 12px; line-height: 1.65; }
.bfStatus { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.bfTouchHint { display: none; }
@media (pointer:coarse) { .bfTouchHint { display:inline; } .bfKeyboardHint { display:none; } }

@container (min-width:500px) {
  .bfWorkbench { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
  .bfWorkbench > * { grid-column: 1 / -1; }
  .bfWorkbench > .bfBrowse { grid-column: 1; align-self: end; }
  .bfWorkbench > .bfRegionChooser { grid-column: 2; }
}

/* A focused, spacious native dialog retains the same controls and artwork. */
.bfDialog {
  width: min(1500px,calc(100vw - 32px));
  max-width: min(1500px,calc(100vw - 32px));
  max-height: calc(100dvh - 32px);
  margin: auto;
  padding: 0 28px 28px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
  border: 1px solid #477082;
  border-radius: 19px;
  background: radial-gradient(ellipse at 30% 25%,rgba(31,76,95,.3),transparent 62%),#071521;
  color: #eef8fc;
  box-shadow: 0 32px 150px rgba(0,0,0,.68),inset 0 1px rgba(213,250,255,.1);
  color-scheme: dark;
}
.bfDialog:not([open]) { display: none; }
.bfDialog::backdrop { background: rgba(0,7,16,.89); backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px); }
.bfDialogBar {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
  margin: 0 -28px 20px;
  padding: 17px 28px;
  border-bottom: 1px solid #284858;
  background: #091a28;
}
.bfDialogBar :is(h2,h3,p) { margin: 0; color: #d8eef4; font-size: 15px; font-weight: 500; line-height: 1.4; letter-spacing: -.01em; }
.bfDialogBar button { flex: 0 0 auto; font-size: 12px; }
.bfDialog .brainStage { position: relative; top: auto; }
.bfDialog .bfExpandedTopic { display: block; }
.bfDialog [data-bf-expand] { display: none; }
.bfDialog .bfHeader { padding-top: 0; }
.bfDialog .bfHeader :is(h2,h3) { font-size: 28px; }
.bfDialog .bfExpandedTopic select { max-width: 490px; }
.bfInspector { display: grid; gap: 15px; min-width: 0; align-content: start; }

@media (max-width:1099px) {
  .bfDialog .bfInspector { display: contents; }
  .bfDialog .bfWorkbench { grid-template-columns: minmax(0,1fr); }
  .bfDialog .bfWorkbench > *,
  .bfDialog .bfInspector > * { grid-column: 1 / -1; }
  .bfDialog .bfHeader { order: 0; }
  .bfDialog .bfExpandedTopic { order: 1; }
  .bfDialog .bfBrowse { order: 2; }
  .bfDialog .bfRegionChooser { order: 3; }
  .bfDialog .bfViewport { order: 4; }
  .bfDialog .bfToolbar { order: 5; }
  .bfDialog .bfHint { order: 6; }
  .bfDialog .bfRelated { order: 7; }
  .bfDialog .bfSubregions { order: 8; }
  .bfDialog .bfDetail { order: 9; }
}
@media (min-width:600px) and (max-width:1099px) {
  .bfDialog .bfWorkbench { grid-template-columns: minmax(0,1fr) minmax(0,1fr); }
  .bfDialog .bfBrowse { grid-column: 1; align-self: end; }
  .bfDialog .bfRegionChooser { grid-column: 2; }
}
@media (min-width:1100px) {
  .bfDialog .bfWorkbench {
    --bf-view-height: clamp(340px,calc(100dvh - 352px),620px);
    grid-template-columns: minmax(0,1.85fr) minmax(280px,1fr);
    grid-template-areas: "header topic" "viewport inspector" "toolbar inspector" "hint inspector";
    grid-template-rows: auto var(--bf-view-height) auto auto;
    gap: 15px 26px;
    align-items: start;
  }
  .bfDialog { padding-bottom: 24px; }
  .bfDialogBar { padding-block: 12px; margin-bottom: 16px; }
  .bfDialog .bfHeader { grid-area: header; align-self: center; }
  .bfDialog .bfExpandedTopic { grid-area: topic; padding: 0; }
  .bfDialog .bfViewport { grid-area: viewport; min-height: 0; height: var(--bf-view-height); max-height: var(--bf-view-height); aspect-ratio: auto; }
  .bfDialog .bfToolbar { grid-area: toolbar; }
  .bfDialog .bfHint { grid-area: hint; }
  .bfDialog .bfInspector {
    grid-area: inspector;
    align-self: stretch;
    min-height: 0;
    height: 100%;
    max-height: calc(var(--bf-view-height) + 125px);
    overflow-y: auto;
    overflow-x: hidden;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: #476e7c #0a1c2b;
    scrollbar-gutter: stable;
    padding: 4px 10px 6px 4px;
    margin: -4px -4px -6px;
  }
  .bfDialog .bfInspector > * { min-width: 0; }
}
@media (max-width:1199px) and (min-width:761px) {
  .bfHeader { align-items: start; gap: 10px; }
  .bfHeader button { max-width: 100px; padding-inline: 9px; font-size: 12px; }
  .bfToolbar { gap: 6px; }
  .bfToolbar .bfIsolate { margin-left: 0; }
  .bfDetail { padding: 17px; }
}
@media (max-width:760px) {
  .bfWorkbench { gap: 12px; }
  .brainStage[data-focus-ready="true"] { padding: 6px 0 10px; }
  .bfHeader { gap: 10px; }
  .bfHeader :is(h2,h3) { font-size: 21px; }
  .bfHeader p { font-size: 9px; letter-spacing: .14em; }
  .bfHeader button { font-size: 12px; padding-inline: 10px; }
  .bfViewport { min-height: 240px; max-height: 360px; border-radius: 13px; }
  .bfViewportBadge { top: 12px; left: 12px; font-size: 11px; padding: 7px 9px; }
  .bfMapNote { inset-inline: 12px; bottom: 10px; font-size: 9px; }
  .bfToolbar { gap: 7px; }
  .bfZoom { flex-basis: 65px; }
  .bfToolbar .bfIsolate { margin-left: 0; }
  .bfDetail { padding: 20px; }
  .bfDetail h3 { font-size: 25px; }
  .bfRelated button { padding-inline: 10px; }
  .bfDialog {
    width: calc(100vw - 16px);
    max-width: calc(100vw - 16px);
    max-height: calc(100dvh - 16px);
    padding: 0 16px 24px;
    border-radius: 14px;
  }
  .bfDialogBar { margin: 0 -16px 18px; padding: 12px 16px; gap: 12px; }
  .bfDialogBar :is(h2,h3,p) { font-size: 13px; }
  .bfDialogBar button { padding: 9px 11px; max-width: 142px; }
  .bfDialog .bfHeader :is(h2,h3) { font-size: 25px; }
  .bfDialog .bfHeader { display: none; }
  .bfDialog .bfViewport { min-height: 255px; max-height: 400px; }
}
@media (max-width:430px) {
  .bfViewport { max-height: 300px; }
  .bfToolbar .bfIsolate { flex: 1 1 auto; }
  .bfZoom { flex-basis: 78px; }
  .bfBrowse button { font-size: 12px; }
}
@media (hover:hover) and (pointer:fine) {
  .bfWorkbench button:hover:not(:disabled),
  .bfDialogBar button:hover { border-color: #8bccd0; background: #183947; }
  .bfRegion[data-active="true"]:hover { fill-opacity: .24; stroke-opacity: 1; }
  .bfSources a:hover { color: #e0fff7; }
}
html:not([data-motion="running"]) .bfWorkbench *,
.bfViewport[data-dragging="true"] * { transition: none; }
html:not([data-motion="running"]) .bfPathways path { animation: none; }
@media (prefers-reduced-motion:reduce) {
  .bfWorkbench *, .bfDialogBar * { animation: none !important; transition: none !important; }
}
@media (prefers-contrast:more) {
  .bfWorkbench { --bf-edge: #8eb1c3; --bf-muted: #dcebf4; }
  .bfViewport,.bfDetail,.bfBrowse { border-color: #8eb1c3; }
  .bfRegion { stroke-opacity: 1; stroke-width: 2; }
  .bfHint,.bfDetail .bfDetailNote { color: #dcebf4 !important; }
}
@media (forced-colors:active) {
  .bfWorkbench,.bfDialog,.bfDialogBar,.bfDetail,.bfBrowse,.bfViewport { background: Canvas; color: CanvasText; border-color: ButtonBorder; box-shadow: none; }
  .bfWorkbench button,.bfWorkbench select,.bfDialogBar button { background: ButtonFace; color: ButtonText; border-color: ButtonBorder; }
  .bfWorkbench button[aria-pressed="true"] { background: Highlight; color: HighlightText !important; outline: 2px solid Highlight; }
  .bfWorkbench :is(button,select,input,a):focus-visible,.bfViewport:focus-visible,.bfDialogBar button:focus-visible { outline-color: Highlight; }
  .bfViewportBadge { background: Canvas; color: CanvasText; border-color: ButtonBorder; }
  .bfRegion { forced-color-adjust: none; stroke: #fff; fill: #50dbde; }
  .bfRegion[data-selected="true"] { stroke: #fff600; fill: #fff600; }
  .bfRegionSwatch { forced-color-adjust: none; }
  .bfViewport::after,.bfPathways { display: none; }
  .bfSources a { color: LinkText; }
}
@media print {
  .bfWorkbench,.bfDialog { display: none !important; }
}

/* Edition 34: real, freely rotatable anatomical surfaces. */
.bfModelHost { position:absolute; inset:0; z-index:1; }
.bfBrainCanvas { display:block; width:100%; height:100%; cursor:grab; touch-action:none; outline-offset:-5px; }
.bfBrainCanvas:active { cursor:grabbing; }
.bfBrainCanvas:focus-visible { outline:2px solid #b8f8f0; }
.bfFallback { display:block; width:100%; height:100%; object-fit:contain; opacity:.65; }
.bfFallback[hidden] { display:none; }
.bfLoadStatus { position:absolute; z-index:3; bottom:50px; left:20px; right:20px; padding:12px 16px; color:#e4f8fc!important; border:1px solid #456575; background:#071a29ee; border-radius:8px; font-size:13px; line-height:1.6; }
.bfLoadStatus[hidden] { display:none; }
.bfCameraRow { flex:1 0 100%; display:flex; align-items:center; flex-wrap:wrap; gap:7px; padding-bottom:4px; }
.bfCameraRow label { margin-right:2px; }
.bfCameraRow select { flex:1; width:auto; min-width:135px; margin:0; font-size:12px; min-height:44px; }
.bfCameraRow button { min-width:44px; font-size:14px; }
.bfCameraRow [data-bf-turn] { font-size:12px; }
.bfSubregions { display:flex; flex-wrap:wrap; gap:7px; padding:15px; border:1px solid #3c5b68; border-radius:12px; background:#102b3a; }
.bfSubregions[hidden] { display:none; }
.bfSubregions p { flex:1 0 100%; color:#bce9e4!important; font-size:11px; text-transform:uppercase; letter-spacing:.09em; margin:0 0 4px; }
.bfSubregions button { font-size:11px; padding:8px 10px; border-bottom:3px solid var(--part-color,#84e5d9); }
.bfViewport > .brainStage__orbit { z-index:0; }
@media(min-width:1100px){ .bfDialog .bfWorkbench { --bf-view-height:clamp(320px,calc(100dvh - 398px),600px); } .bfDialog .bfInspector {max-height:calc(var(--bf-view-height) + 177px);} }
@media(max-width:430px){ .bfCameraRow label{display:none;} .bfCameraRow select{min-width:115px;} .bfCameraRow{gap:5px;} .bfCameraRow button{padding-inline:8px;} .bfViewportBadge{max-width:calc(100% - 24px);} }