:root { color-scheme: dark; }
.brain-lobes-page { margin: 0; overflow: hidden; background: #080d12; color: #eef2ef; }
.brain-lobes-page .brain-site-header { z-index: 30; border-bottom-color: rgba(255,255,255,.1); background: rgba(8,13,18,.72); color: #eef2ef; backdrop-filter: blur(18px); }
.brain-lobes-page .brand-mark { stroke: #d7ff63; }
.brain-lobes-page .desktop-nav a, .brain-lobes-page .icon-button { color: #b7c0bd; }
.brain-lobes-page .desktop-nav a.active { color: #d7ff63; }
.brain-stage { position: relative; width: 100%; height: 100vh; min-height: 660px; overflow: hidden; isolation: isolate; background: radial-gradient(circle at 56% 48%, #1a2026 0, #0e151b 37%, #080d12 74%); }
#brain-canvas { position: absolute; inset: 0; z-index: 1; width: 100%; height: 100%; outline: none; cursor: grab; touch-action: none; }
#brain-canvas:active { cursor: grabbing; }
.brain-vignette { position: absolute; z-index: 2; inset: 0; pointer-events: none; background: radial-gradient(circle at 56% 50%, transparent 26%, rgba(3,7,10,.1) 55%, rgba(3,7,10,.68) 110%), linear-gradient(90deg, rgba(5,9,13,.65), transparent 32%, transparent 74%, rgba(5,9,13,.38)); }
.brain-loading { position: absolute; left: 50%; top: 50%; z-index: 7; display: flex; align-items: center; gap: 12px; transform: translate(-50%,-50%); color: rgba(255,255,255,.62); font: 500 9px var(--mono); letter-spacing: .12em; text-transform: uppercase; transition: opacity .5s, visibility .5s; }
.brain-loading span { width: 20px; height: 20px; border: 1px solid rgba(255,255,255,.18); border-top-color: #d7ff63; border-radius: 50%; animation: brain-loading-spin .8s linear infinite; }
.brain-loading.loaded { opacity: 0; visibility: hidden; }
.brain-loading.error { color: #ff9d86; }.brain-loading.error span { display: none; }
.brain-credit { position: absolute; right: 26px; bottom: 76px; z-index: 8; width: min(320px, 42vw); margin: 0; color: rgba(255,255,255,.34); font: 400 7px/1.5 var(--mono); text-align: right; letter-spacing: .04em; }
@keyframes brain-loading-spin { to { transform: rotate(360deg); } }
.brain-title { position: absolute; z-index: 8; top: 112px; left: clamp(24px, 4.5vw, 76px); width: min(395px, 36vw); pointer-events: none; }
.brain-back { display: inline-block; margin-bottom: 34px; padding-bottom: 5px; border-bottom: 1px solid rgba(255,255,255,.2); color: #aab5b2; pointer-events: auto; font: 400 8px var(--mono); letter-spacing: .09em; text-transform: uppercase; }
.brain-title .eyebrow { color: #9eaaa7; font-size: 8px; }
.brain-title h1 { margin: 19px 0 22px; max-width: 390px; color: #f4f5ef; font: 500 clamp(54px, 5vw, 82px)/.87 var(--display); letter-spacing: -.055em; }
.brain-title h1 em { color: #d7ff63; font-weight: 400; }
.brain-title > p:last-child { max-width: 340px; color: #91a09f; font: 400 12px/1.7 var(--sans); }
.brain-labels { position: absolute; z-index: 7; inset: 0; pointer-events: none; }
.brain-label { position: absolute; display: flex; align-items: center; gap: 8px; padding: 8px 11px; border: 1px solid rgba(255,255,255,.18); border-radius: 3px; background: rgba(8,14,19,.78); box-shadow: 0 10px 30px rgba(0,0,0,.22); color: #f1f4ef; pointer-events: auto; cursor: pointer; font: 500 9px var(--mono); letter-spacing: .05em; text-transform: uppercase; backdrop-filter: blur(12px); transition: opacity .2s, border-color .2s, color .2s, transform .2s; transform: translate(-50%,-50%); white-space: nowrap; }
.brain-label::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--label-color); box-shadow: 0 0 10px var(--label-color); }
.brain-label:hover, .brain-label.active { border-color: var(--label-color); color: #fff; transform: translate(-50%,-50%) scale(1.04); }
.brain-label.function { max-width: 190px; white-space: normal; text-align: left; line-height: 1.35; text-transform: none; letter-spacing: 0; font-family: var(--sans); font-size: 10px; }
.brain-label.function::before { flex: 0 0 auto; width: 5px; height: 5px; }
.brain-label.landmark { max-width: 205px; border-color: rgba(220,233,229,.28); background: rgba(12,19,24,.9); color: #dce9e5; white-space: normal; text-align: left; text-transform: none; letter-spacing: .01em; line-height: 1.35; }
.brain-label.landmark::before { flex: 0 0 auto; width: 8px; height: 8px; border: 1px solid #dce9e5; background: transparent; box-shadow: 0 0 0 3px rgba(220,233,229,.08); }
.brain-info { position: absolute; z-index: 8; right: clamp(24px, 4vw, 66px); top: 126px; width: min(285px, 24vw); padding: 18px 20px; border: 1px solid rgba(255,255,255,.15); border-radius: 5px; background: rgba(7,13,18,.75); box-shadow: 0 24px 70px rgba(0,0,0,.28); backdrop-filter: blur(18px); }
.brain-info > span { color: #71817f; font: 400 7px var(--mono); letter-spacing: .1em; text-transform: uppercase; }
.brain-info h2 { margin: 10px 0 9px; color: #f2f4ef; font: 500 26px/1 var(--display); }
.brain-info > p { margin: 0; color: #9ba8a5; font: 400 11px/1.6 var(--sans); }
.brain-info-mode { display: flex; justify-content: space-between; gap: 12px; margin-top: 16px; padding-top: 11px; border-top: 1px solid rgba(255,255,255,.1); color: #6f7e7c; font: 400 7px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.brain-info-mode strong { color: #d7ff63; font-weight: 500; }
.brain-guide { position: absolute; z-index: 7; left: clamp(24px, 4.5vw, 76px); bottom: 34px; display: flex; gap: 22px; color: #71817f; font: 400 7px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.brain-guide span + span::before { content: "·"; margin-right: 22px; color: #d7ff63; }
.brain-zoom { position: absolute; z-index: 9; left: 50%; bottom: 24px; width: min(590px, calc(100vw - 48px)); padding: 13px 16px 15px; border: 1px solid rgba(255,255,255,.15); border-radius: 5px; background: rgba(5,11,16,.82); box-shadow: 0 24px 70px rgba(0,0,0,.34); backdrop-filter: blur(20px); transform: translateX(-50%); }
.brain-scale-copy { display: grid; grid-template-columns: 1fr auto 1fr; margin-bottom: 11px; color: #71817f; font: 400 7px var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.brain-scale-copy strong { color: #d7ff63; font-weight: 500; }.brain-scale-copy output { text-align: right; }
.brain-slider-row { display: grid; grid-template-columns: 28px auto 1fr auto 28px; align-items: center; gap: 11px; }
.brain-slider-row > span { color: #91a09f; font: 400 7px var(--mono); text-transform: uppercase; letter-spacing: .08em; }
.brain-slider-row button { display: grid; place-items: center; width: 28px; height: 28px; padding: 0; border: 1px solid rgba(255,255,255,.18); border-radius: 50%; background: transparent; color: #f5f7f4; cursor: pointer; font-size: 16px; }
.brain-slider-row button:hover { border-color: #d7ff63; color: #d7ff63; }
#brain-slider { width: 100%; height: 3px; margin: 0; appearance: none; border-radius: 10px; outline: none; background: linear-gradient(90deg, #d7ff63 0 var(--progress), rgba(255,255,255,.15) var(--progress)); cursor: pointer; }
#brain-slider::-webkit-slider-thumb { width: 16px; height: 16px; appearance: none; border: 3px solid #d7ff63; border-radius: 50%; background: #0c151b; box-shadow: 0 0 0 4px rgba(215,255,99,.12); }
#brain-slider::-moz-range-thumb { width: 11px; height: 11px; border: 3px solid #d7ff63; border-radius: 50%; background: #0c151b; }
.brain-reset { position: absolute; z-index: 8; right: clamp(24px, 4vw, 66px); bottom: 31px; padding: 10px 13px; border: 1px solid rgba(255,255,255,.16); border-radius: 100px; background: rgba(5,11,16,.65); color: #a9b8b4; cursor: pointer; font: 400 7px var(--mono); letter-spacing: .07em; text-transform: uppercase; backdrop-filter: blur(12px); }
.brain-reset span { margin-right: 7px; color: #d7ff63; }
@media(max-width: 1050px) { .brain-guide { display: none; }.brain-title { width: 42vw; }.brain-info { width: 250px; }.brain-reset { bottom: 108px; } }
@media(max-width: 720px) { .brain-stage { min-height: 660px; }.brain-title { top: 82px; left: 18px; width: calc(100vw - 36px); }.brain-title .brain-back { margin-bottom: 18px; }.brain-title h1 { max-width: 300px; font-size: 48px; }.brain-title > p:last-child { display: none; }.brain-info { left: 18px; right: auto; top: auto; bottom: 116px; width: min(270px, calc(100vw - 100px)); padding: 13px 15px; }.brain-info > p { display: none; }.brain-info h2 { font-size: 21px; }.brain-zoom { bottom: 14px; width: calc(100vw - 28px); }.brain-reset { right: 16px; bottom: 126px; }.brain-credit { display: none; }.brain-label { font-size: 7px; padding: 6px 8px; }.brain-label.function { max-width: 125px; font-size: 8px; } }
@media(max-width: 480px) { .brain-slider-row > span { display: none; }.brain-slider-row { grid-template-columns: 28px 1fr 28px; }.brain-title .eyebrow { font-size: 7px; } }
@media(prefers-reduced-motion: reduce) { .brain-label { transition: none; } }